css中的div如何自动适应浏览器大小？

html-css015

css中的div如何自动适应浏览器大小？,第1张

网页自适应浏览器大小：\x0d\x0a\x0d\x0a首先要在头部，即标签内写自适应代码，如下：\x0d\x0a\x0d\x0a其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如：\x0d\x0a@media screen and (max-width:640px){ \x0d\x0aelement{ color:#ff0000} //屏幕宽度小于640px时显示红色字体\x0d\x0a}\x0d\x0a@media screen and (max-width:480px){ \x0d\x0aelement{ color:#0000ff} //屏幕宽度小于480px时显示蓝色字体\x0d\x0a}

css自适应宽度有2种方式：

1.是通过百分比来控制宽度；

2.可以通过块状元素自动占满父级的宽度的特性来实现

PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。

你好，如果只考虑高级浏览器，这个需求很好做，一句简单的css代码就可以搞定了：html,body {width: 100%height: 100%}body {background-image: url(images/bg.png)background-size: cover}其中background-size的取值：cover：保证背景不变形填满窗口，超出部分被裁剪contain：保证整张背景图片在body内部，不足区域留白二者都能保证背景随窗口大小变化而自适应。另，如果是要考虑到低级浏览器，这个稍微麻烦点，不过可以给你提供解决方案设置一个背景img标签，fixed定位，填满整个窗口window.onresize的时候，动态计算img标签的尺寸，同时改变定位位置希望能解决你的问题，如有疑问欢迎追问，望采纳~