鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 操作系统维护 > 其它 > >

常见响应式布局实现方案

来源:互联网 作者:佚名 时间:2017-09-06 09:22
媒体查询 媒体查询可以使用 @media 在css样式当中进行断点 , 让指定的css样式按照要求进行生效 @media (max-width: 768px ) { .box { color : red ; } } 上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效 根据媒体类型进行断点 all 所有设备

媒体查询

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

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

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

根据媒体类型进行断点
  • all 所有设备
  • print 用于打印机和打印预览
  • screen 用于电脑屏幕 平板电脑 智能手机等
  • speech 屏幕阅读器等发声设备
逻辑操作符

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

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

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

@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}
按需加载CSS

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

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

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

REM

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

这个单位代表的是相对于htmlfont-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方案是可以使用媒体查询的

网友评论
<