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

html-css09

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%宽度,也不一定有良好的布局,并不能称之为自适应。