首先设置meta属性，如下代码：

使用如下代码就能实现移动端的适配：

html {

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！那么1vw就是表示1%的屏幕宽度。

其中的13.33333333vw是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem(设计稿为750px)。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。

参考网易新闻移动端的写法：

/**

* view-port list:

320x480

320x568

320x570

360x592

360x598

360x604

360x640

360x720

375x667

375x812

393x699

412x732

414x736

480x854

540x960

640x360

720x1184

720x1280

800x600

1024x768

1080x1812

1080x1920

*/

html {

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

@media screen and (max-width: 320px) {

html {

font-size: 42.667px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 321px) and (max-width: 360px) {

html {

font-size: 48px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 361px) and (max-width: 375px) {

html {

font-size: 50px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 376px) and (max-width: 393px) {

html {

font-size: 52.4px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 394px) and (max-width: 412px) {

html {

font-size: 54.93px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 413px) and (max-width: 414px) {

html {

font-size: 55.2px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 415px) and (max-width: 480px) {

html {

font-size: 64px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 481px) and (max-width: 540px) {

html {

font-size: 72px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 541px) and (max-width: 640px) {

html {

font-size: 85.33px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 641px) and (max-width: 720px) {

html {

font-size: 96px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 721px) and (max-width: 768px) {

html {

font-size: 102.4px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 769px) {

html {

font-size: 102.4px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

body {

font-family: "PingFangSC-Regular", "Microsoft YaHei", Helvetica;

color: #333333;

background: #f5f7f9;

}

html a {

color: #333333;

}

这样写法也是为了兼容老版本手机不支持vw以及calc语法。

如果页面使用px单位，怎样进行rem的适配，把px转换为rem单位：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

参考地址：

rem简单实现移动端适配

rem:移动web开发 默认字体大小是16px 在中设置字体大小 与em的区别: em是在父级设置字体大小受影响 移动端适配 首先获取屏幕的宽度 计算当前屏幕宽度和640的比例 ...

小tips：node起一个简单服务，打开本地项目或文件浏览

1.安装nodejs 2.在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 var http = require('http'); var fs = require( ...

移动端适配 后篇(rem+vm)

涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...

移动端适配-rem(新)

概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

简单介绍移动端CSS3单位rem的用法

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

Windows7驱动调试小Tips

v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

你不知道的JavaScript--Item17 循环与prototype最后的几点小tips

1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的 ...

整理一些《纸书科学计算器》的小Tips

本文最开始是在2016年的文章 Win10应用更新啦! 发表之后撰写的,当时那篇文章收到了不少人点赞,应用在国内市场的日下载量也突然上涨,让我感到受宠若惊,这里要感谢Wp ...

随机推荐

转：RealThinClient LinkedObjects Demo解析

这个Demo源码实现比较怪,有点拗脑,原因估是作者想把控件的使用做得简单,而封装太多. 这里说是解析,其实是粗析,俺没有耐心每个实现点都查实清楚,看源码一般也就连读带猜的. 这个Demo表达出的意义, ...

Appium+Maven+TestNG(ReportNG)环境搭建(详细过程)

最近群里经常有人会问到关于maven构建Appium测试项目以及使用testNG生成测试报告的问题,试着搭建了一下,下面是过程: jdk安装过程我这里就不说了 一.下载eclipse,推荐下载Ecli ...

一个利用window.name实现的windowStorage

//key:value|key:value var windowStorage = { _inited: false, _data: {}, init: function(str) { var tmp ...

基于TF/IDF的聚类算法原理

一.TF/IDF描述单个term与特定document的相关性TF(Term Frequency): 表示一个term与某个document的相关性. 公式为这个term在document中出 ...

Redis作者谈Redis应用场景

Redis作者谈Redis应用场景 毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多 ...

java 文件字节输入流

Example10_4.java import java.io.*; public class Example10_4 { public static void main(String args[]) ...

使用if语句时应注意的问题(初学者)

(1)在三种形式的if语句中,在if关键字之后均为表达式.该表达式通常是逻辑表达式或关系表达式,但也可以是其他表达式,如赋值表达式等,甚至也可以是一个变量. 例:if(a=5)语句: if(b)语句: ...

PLSQL使用技巧 如何设置默认显示My Objects、记住密码等

https://www.cnblogs.com/yilinzi/p/7144852.html PL/SQL Developer实现双击table查询 https://blog.csdn.net/zhy ...