Question

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

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

Answer 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做单位。当布局缩小时，布局也有相应的改变，如隐藏一些不大重要的内容。最好就是找一些响应式网页设计的书籍看看，多看多练。