回答
JavaScript示例:在调整大小JSFiddle Demo
更改元素的CSS:
如果viewport
宽度小于800
,那么它将改变#test
DIV
HTML
的宽度<h1 id="width"></h1>
<div id="test"></div>
CSS
#test { width:200px; height:50px; background:red; }
的Javascript
// set the initial width
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
// on resize
window.addEventListener('resize', function(event){
var viewportWidth = document.documentElement.clientWidth;
var test = document.getElementById("test");
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
if(viewportWidth < 800){
test.style.width = "500px";
}
});
其伟大的,但在哪里可以按大小设置一个CSS元素? – user3327101
@ user3327101我已更新我的答案,以向您展示如何在调整大小时更改元素宽度。 –
我认为这是你在找什么:
如果你的元素有类element
$(window).resize(function() {
$(".element").css("width", window.innerWidth;);
});
然后,你可以做这样的事情window.innerWidth/2
或window.innerWidth - 50
。
yeand我可以在哪里设置大小的CSS? – user3327101
@ user3327101我只是做了一个编辑来显示。 – apohl
感谢您的帮助我 – user3327101
- 1. 屏幕的HTML/css宽度
- 2. 对齐设置宽度的CSS元素
- 3. CSS设置元素的宽度
- 4. Android |获取屏幕高度,宽度和屏幕宽度,高度
- 5. 获得屏幕宽度元素
- 6. 元素宽度:100%在屏幕外
- 7. 将relativelayout的宽度设置为屏幕宽度的1/3?
- 8. CSS设置宽度parentNode的宽度
- 9. 设置视图的宽度屏幕
- 10. ImageView的宽度大于屏幕宽度
- 11. 如何设置元素的宽度等于设备宽度?
- 12. Pygame屏幕宽度
- 13. JS屏幕宽度
- 14. 屏幕宽度和高度
- 15. 如何设置子宽等于父元素宽度与CSS?
- 16. 如何使用Css减小宽度屏幕的宽度?
- 17. 非全屏宽度父亲的子元素的全屏宽度
- 18. CSS:根据屏幕宽度居中float:left元素?
- 19. 添加屏幕宽度的一类,如果屏幕宽度小于960像素
- 20. jQuery使用外部宽度来设置元素宽度
- 21. 设置列表元素宽度文本宽度
- 22. 通过CSS设置基于高度的元素宽度
- 23. CSS:宽度100%不是屏幕
- 24. CSS:最小宽度和小屏幕
- 25. CSS宽度stranege在小屏幕上
- 26. 使用CSS跨屏幕的宽度
- 27. CSS半屏幕浏览器宽度
- 28. CSS宽度:100%不适合屏幕
- 29. CSS媒体 - 屏幕宽度不一致
- 30. CSS更改元素高度和宽度
你的意思'宽度:100%'? –