本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

在工作中大多数情况开发页面不单单要做PC端，还得做移动端，这时需要对页面做一定适配，适配移动端的关键就在于meta标签，而rem的控制这里主要记录两种不同的设计图为依据的方案。

1.设计图以PC为模板

2.设计图以移动端为模板

使用meta标签

首先我们需要利用meta标签对viewport进行控制(如果不清楚viewport可以先干完活去了解一下，不影响使用，但是这属于基础知识) content属性值：

width：可视区域的宽度，值可为数字或关键词device-width
height：同width
ntial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maxmun-scale = 1.0, minmun-scale = 1.0; 可视区域的缩放级别
user-scalable：是否可对页面进行缩放，no禁止缩放

以下的meta标签即让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放；如果不这样设定好就会使用比屏幕宽的viewport，就会出现横向滚动条

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
</head>

rem控制

1.设计图以PC为模板

代码如下：

<style>
	html{ font-size: 100px; }
	/* 手机屏 当页面宽度小于750px*/
    @media only screen and (max-width: 750px) {
        html { font-size: 13.3vw; }
    }
    /* pc端 适配 当页面宽度大于750px 小于1200px*/
    @media screen and (min-width:750px) and (max-width:1200px){
        html { font-size: 88px }
    }
</style>

2.设计图以移动端为模板

代码如下：

<style>
	html {font-size: 13.4vw; }
	/* 当页面宽度小于319px */
	@media screen and (max-width: 319px) {
	    html {font-size: 42.6px;}
	}
	/* 当页面宽度大于750px */
	@media screen and (min-width: 750px) {
	    html {font-size: 100px; }
	}
</style>

总结

接下来就可以按设计图的宽高px / 100 得到对应的rem啦

移动端css适配方案

前言

使用meta标签

rem控制

1.设计图以PC为模板

2.设计图以移动端为模板

总结