Html
    Css
    Js

    
                        
@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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3 响应适布局 @media用法

使用说明:

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;}
6
      神已归来0
      2017/9/2 21:37:09
      是不是可以适用于所有的网页自适应效果,不用每个模块去单独设置自适应了是吧? 回复
      少昊sh0
      2017/8/18 14:24:04

      PSD稿中所有的像素都是除以10,来换算成rem么

          沐枫自然1
          2017/8/21 11:53:59

          @少昊sh:

          是的,不管是宽度width、高度height、外边距margin、内边距padding、定位position、字体大小等都是一样的,(注:前提是根据PSD稿中的总宽度如:常用的iphone6 750px, iphone5 640px),在js代码中设置对应的缩放比例:

          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          少昊sh0
          2017/8/21 19:51:44
          我的要除以100才可以
      回复
      古城深巷旧少年0
      2017/8/17 9:00:36

      如果设计稿是640的呢?是不是设计稿宽度不管多少,只需把js部分的750替换就行?rem仍然是除以10?根元素应该设为多少px?坐等大神耐心解答!

          沐枫自然1
          2017/8/17 21:43:56

          @古城深巷旧少年:

          和之前写法完全一样,而单位rem仍然是缩小10倍,注:把上面js代码中 第10行 //移动端缩放比例关系,之前代码:

          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

          现在改为:

          docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

          就可以了,没啥区别的。

      回复