常见响应式布局实现方案

媒体查询

媒体查询可以使用@media在css样式当中进行断点 , 让指定的css样式按照要求进行生效

@media (max-768px) {
	.box {
		color : red;
	}
}

上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效

根据媒体类型进行断点

• all 所有设备
• print 用于打印机和打印预览
• screen 用于电脑屏幕 平板电脑 智能手机等
• speech 屏幕阅读器等发声设备

逻辑操作符

使用逻辑操作符可以构建复杂的媒体查询 , 有and , not , only等

@media (min- 700px) and (orientation: landscape) {
/* 宽度大于700并且横屏的时候应用该效果 */
  .box1 { color: red; }
}

只用于屏幕显示( 打印输出不生效 )

@media only screen and (max-1150px){
    div{border:solid 1px;}
}

按需加载CSS

其实与上面的媒体查询作用是一样的 , 只不过在页面引入css时添加媒体查询条件

<link type="text/css" rel="stylesheet" href="base.css" media="(max-500px)"/>

浏览器在执行渲染的时候 , 实际和媒体查询是一样的 , 相当于给整个文件当中的css包装了一层媒体查询

REM

这是一个应用于长度的单位 , 所有可以用长度值来声明的CSS样式 , 都可以以它当做单位 , 比如width , font-size等等

这个单位代表的是相对于html的font-size的值
比如

html {
  font-size:100px;
}
body {
  /* 为了防止元素继承html的字号,干扰全局样式,所以重置为默认 */
  font-size:initial;
}
.box2 {
  width : 0.5rem;
}

那么box2的实际宽度就是 0.5 × 100px = 50px
基于这种机制 , 我们就可以编写页面resize事件的回调函数
在函数当中获取当前视窗的宽度与高度 , 去动态改变根元素(html节点)的font-size的值
从而让页面中的元素适应视窗大小的变化
( 假定设计稿给出的宽度是750px )

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
   
    if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

设置viewport的width

这种方案 , 就是直接指定viewport的width大小

<meta name="viewport" content="width=750" />

但是使用了这种方案之后
因为已经将宽度定死了 , 所以针对宽度执行的媒体查询就会失效
存在很大的弊端
而使用REM方案是可以使用媒体查询的