响应式布局的开发基础及注意事项

概念

响应式网页设计就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

设计步骤

（1） 设置meta标签

content属性值：

content属性值

（2）设置媒体查询media query样式

$screen-sm:768px;
$screen-md:992px;
$screen-lg:1200px;

// 超小屏 手机
@media (max-width: $screen-sm) , (max-device-width:$screen-sm) { 
  html{
    font-size: 50% !important;
  }
 }

//小屏幕  平板
@media (min-width: $screen-sm) and (max-width: $screen-md),(min-device-width: $screen-sm) and (max-device-width: $screen-md) { 
  html{
    font-size: 62.5%  !important;
  }
 }


//中等屏幕  桌面显示器
@media (min-width: $screen-md) and (max-width: $screen-lg),(min-device-width: $screen-md) and (max-device-width: $screen-lg){ 
  html{
    font-size: 62.5% !important;
  }
 }

// 大屏幕 大桌面显示器
@media (min-width: $screen-lg),(min-device-width: $screen-lg) { 
  html{
    font-size: 62.5% !important;
  }
 }

注意事项

（1）图片自适应

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

(2) rem rem px

• em:根据使用它的元素的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉）

1、浏览器的默认字体大小是16px
为了方便单位计算方便，一般是这字体百分比为62.5%。
原因：1em = 16px. Therefore, 1px = 1 ÷ 16 = 0.0625em.
2、元素自身没有设置字体大小，那么元素自身上的所有含单位的属性值如“boder、width、height、padding”等值计算如下，

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

         .parent{
               font-size: 16px;
           }
           .child1{
               padding: 1em;
           }

2单位换算后

3.元素自身设置字体大小，本身元素字体按2公式计算，其他包含单位的元素属性按下列公式计算

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

         .child2{
               font-size: 2em;
               padding: 1em;
           }

3单位换算后

参考及推荐：
https://www.w3cplus.com/css/px-to-em
https://www.w3.org/Style/LieBos3e/em

• rem:基于html元素的字体大小来决定.

  
  
  

  image.png

推荐：
https://www.w3cplus.com/css3/define-font-size-with-css3-rem