这里介绍个方案包含5个点:1、meta viewport;2、媒体查询;3、动态rem方案;4、对rem微调;5、其他细节补充。

一、meta viewport

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

在head标签内部加上这段代码。

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度。

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

二、媒体查询(响应式)

1、格式一

@media ()and(){}
//满足()里的条件,就执行大括号里css的样式

举例:

<style>
@media (max-width:320px){
    body{
        background:red;
    }
}
@media (min-width:321px) and (max-width:320px){
    body{
        background:orange;
    }
}
@media (min-width:376px) and (max-width:425px){
    body{
        background:green;
    }
}
@media (min-width:426px) and (max-width:768px){
    body{
        background:blue;
    }
}
@media (min-width:769px){
    body{
        background:grey;
    }
}   
</style>

2、格式二

并举例

<link rel="stylesheet" href="style.css"media="(max-width:320px)">

注意点: 1、link标签会下载好,但是是否生效取决于media的条件; 2、有PC端经验,就有移动端经验,只是多了一个media查询; 3、通过添加多个css样式来满足不同的屏幕宽度;

三、动态rem方案

1rem等于根元素html的font-size的值,那么可以调整根元素的font-size值来调整页面缩放后的各个元素的尺寸和定位。

在script标签加入这段代码:

<script>
   var pageWidth=window.innerWidth  //获取屏幕宽度
   document.documentElement.style.fontSize= `${pageWidth/60}px`
</script>

此处,fontSizede的值为屏幕宽的十分之一,那么在写CSS的时候可以这样写:

.xxx{
    width:0.4rem;
    height:0.2rem;
    margin:0.05rem 0.05rem;
    float:left;
 }

用sass将px转化为rem:

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth: 320px; 

那么1rem=32px

四、对动态rem进行微调

1、rem都是小数很不方便。所以让 html 的 font-size 的尺寸等于 window.innerWidth/10;

2、浏览器默认可设置的最小字体大小为12px,浏览器默认可设置的最小字体大小为12px,浏览器默认可设置的最小字体大小为12px;

3、在精细的地方,就直接写像素,混用px rem em - 比如border:1px solid red; - 比如页面字体的大小就直接写font-size:16px

五、其他补充

1、px em rem vh vw的区别

px:表示像素
em:一个字的高度 //1em == 自己font-size的值
rem:root em // 根元素html的font-size
vh:viewport height   视口高度=100vh
vw:viewport width    视口宽度=100vw

2、body默认字体为16px,其中chrome默认可设置的最小字体大小为12px,更改body的font-size是rem是不会变的,更改的必须是html的font-size。

3、百分比布局和整体缩放布局的区别 - 百分比布局:无法让高度跟着屏幕宽度改变而进行有比例的改变,高度和宽度无法做任何的配合; - 整体缩放布局:一切单位以宽度为基准。