CSS3 响应适布局 @media用法

Html

Css

Js

div1
div2
div3
div4
div5
div6
div7
div8

@charset "utf-8"; * { margin:0; padding:0; } body { background:#ccc; font-family:arial; text-align:center; color:white; line-height:200px; } div { height:200px; float:left; } /*当屏幕宽度大于980px时 */ @media (min-width:980px) { div { width:22.5%; margin-left:2%; background:blue; font-size:.5rem; margin-top:2%; } }/*当屏幕宽度小于980px 并且 大于640px时 */ @media (max-width:980px) and (min-width:640px) { div { width:47%; margin-left:2%; margin-top:2%; background:green; font-size:1rem; } }/*当屏幕宽度小于640px时 */ @media (max-width:640px) { div { width:96%; margin:2%; background:red; float:none; font-size:1.5rem; } }

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) { return false; } //移动端缩放比例关系 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) { return false; } //监听浏览器窗口大小 win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

使用说明：

1、CSS3响应适布局 @media用法, 响应适, 自适应。

2、拖动改变浏览器窗口大小看效果。

3、最适用于移动端的布局。

4、宽度可根据需求调整，当@media中的宽度条件满足时则该条件下的样式生效，否则反之！

5、字体大小变化（不只是用于设置字体大小，还可以用于设置元素的宽、高、定位等）：字体大小单位是rem，是根据js中监听浏览器窗口大小的方法，去改变字体大小的。

注：（js代码中，是以移动端常见的宽度 750px 为标准，进行缩放的。可以根据自己的需要进行调整）。

6、当用rem单位，作为设置元素的宽、高、定位、字体大小等样式时，根据PSD设计稿中的px单位进行 缩小10倍 即可。

例如：

当PSD稿中一个按扭的宽度为：120px; 高度为：56px; 左外边距为：8px; 字体大小为：16px。 用rem单位写法：

button{ width: 12rem; height: 5.6rem; margin-left: 0.8rem; font-size: 1.6rem;}