div+css 如何自动适应浏览器大小

html-css033

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

网页自适应浏览器大小:

首先要在头部,即<head></head>标签内写自适应代码,如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

其次,网页内部的元素宽度要使用百分比,在不同的屏幕大小下需使用媒体查询定义不同的css代码,例如:

@media screen and (max-width:640px){

element{ color:#ff0000} //屏幕宽度小于640px时显示红色字体

}

@media screen and (max-width:480px){

element{ color:#0000ff} //屏幕宽度小于480px时显示蓝色字体

}

其实对于css浏览器窗口居中这个问题很好解决:

主要是设置:一个属性

margin:0

auto;

具体代码如下:

效果图:

窗口缩小后的效果图:

总结:#center{

margin:0

auto}

但是要浏览器窗口大小改变的话

也是居中的话

就得要用到js代码来实现了

resize()

窗口改变事件