css 动态rem_CSS响应式布局

设置meta标签中 name="viewport"

设置视图标签(viewport)来告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries 媒体查询

• 媒体查询可以针对不同的媒体类型(screen print)定义不同的样式
• 媒体查询根据 条件判断 告诉浏览器如何针对不同的宽度渲染页面

代码

/* 随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式 */
/* 移动端优先使用min-width */
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* PC端优先使用max-width */
/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}

百分比布局

• border-radius, translate 的百分比，是相对于自身
• padding, marigin 的百分比，不论垂直方向还是水平方向，相对于直接父元素的width
• height, width; top, bottom; left, right，都是相对于直接父元素

缺点
各属性使用百分比，相对父元素的属性并不是唯一的。导致百分比布局很复杂。
rem布局
em 和 rem 是什么

• em: 相对于父级元素的字体大小
• rem: 使用rem为元素设定字体大小时，指的是相对于HTML根元素的字体大小。

rem 布局的要点

1. 根元素的 font-size 提供了一个基准，其他元素以 rem 为固定单位定义大小。
2. 需要根据视图容器的大小，动态的改变根元素 font-size，其他元素也会发生响应式的变化。
3. 在CSS样式之前要写一段JS代码，动态控制根元素 font-size 的大小。

代码
添加resize事件监听，回调函数可以改变rem的大小

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

利用媒体查询，以rem为单位设置不同尺寸设备下的字体大小

/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}

视口单位

使用 vw 作为 CSS 单位

图片响应式

使用 max-width

img {
    display: inline-block; // 元素相对于周围内容以内联形式呈现，但可以设置宽度和高度
    max-width: 100%;
    height: auto; // 保证图片进行等比缩放而不至于失真
}

max-width 保证图片最大宽度为其容器的100%。如果图片宽度超过了其容器，图片会缩放，占满最大可用空间。

不能用 width: 100% 。这条规则会导致他显示的跟容器始终一样宽。在容器比图片宽的多的情况下，图片被无限拉伸。

使用 background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

成型方案

• Flex弹性布局
• Grid网格布局
• Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

作者：前端蔡徐坤
链接： https:// juejin.im/post/68708091 05095720973
来源：掘金