html+css怎么实现网页整体布局自适应(宽度随着屏幕分辨率变化而变化)。看好了不是html5加

html-css017

html+css怎么实现网页整体布局自适应(宽度随着屏幕分辨率变化而变化)。看好了不是html5加,第1张

在CSS里添加媒体查询，查询屏幕宽度的大小。具体语句比如<link rel="stylesheet" media="screen and (min-width:980px) and (max-width:2048px)" href="CSS/min980px.css" />，这里就是查询最新屏幕宽度980px最大屏幕宽度2046px的时候，加载"CSS/min980px.css"这个CSS文件，min980px.css文件里要用百分比的方式来布局，这样布局就自适应了，另外字体的大小也要用自适应才行，如大小用em做单位。当布局缩小时，布局也有相应的改变，如隐藏一些不大重要的内容。最好就是找一些响应式网页设计的书籍看看，多看多练。

先定义一个表格的默认宽度

if(body宽度小于600){

表格的父类设置css属性overflow-x，值为auto；

表格宽度赋值为设定好的宽度

}

else{

还原

}

网页自适应意思是指：让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。这里的调整布局，并不要求一定要100%的宽度，只要是在不同的屏幕尺寸下，都能有良好的布局，字体大小适当，就是自适应的网页。而全都设置成100%宽度，也不一定有良好的布局，并不能称之为自适应。