html百分比布局缩放自适应

1.左侧固定右侧自适应-定位 步骤:

左侧宽度写死——》定位——》给父元素设置左padding即可

右侧宽度不用设置(自适应)

2.浮动+触发BFC 拓展:想详细了解BFC戳这里 overflow:hidden 会触发盒子的BFC 触发BFC的盒子的特点: 解决margin的塌陷 清除浮动 ...

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

扩展资料：

自适应网页设计（Adaptive  Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例，里面是六个主人公的头像。

如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。

用table的话，宽度采用百分比，比如width=“98%”，表格居中align=“center”就可以了。\x0d\x0a用div的话，宽度仍然采用百分比，样式margin: 0 auto就可以自动居中了。\x0d\x0a采用百分比能够自动适应窗口，但不会小于页面元素中最宽的固定宽度。\x0d\x0a一般页面宽度可以设置为1002px。1024的分辨率下刚好满屏，不出现横向滚动条。

---