前言 工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC端 本文主要是讲解移动端的响应式布局， 但是在真正进入之前， 先了解一些概念 ...

说到移动端适配，首先我们需要先搞清楚一些基础知识，所以本文路线是先了解像素，dpr，视口等基础知识，然后再整理出移动端适配方案。 基础知识 像素 像素其实分为两种，分别是物理像素和CSS像素 物理像素（设备像素） 物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个 ...

转自：https://segmentfault.com/a/1190000011586301 作者：Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度 ...

这个话题有些复杂，说起来有些琐碎，因为和移动端适配相关的问题太多了。 1. 概念 1.1 设备像素 设备像素被称为物理像素，它是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。 1.2 屏幕密度（ppi ...

在移动端开发过中，会遇到一个问题，就是如何适配各种机型？ 看到好多资料，说是用媒体查询@media来写，但是现在这么多手机型号，一个一个来匹配，感觉太傻了 我推荐给大家一种方法：根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 ...

关于移动端的适配方案，现在其实已经有很多了，什么百分比、font-size+rem、视窗单位（vw、vh）等等，在介绍懒适配之前，先说说我常用的百分比吧。 百分比布局 　　元素的size：页面上的元素的width都使用百分比来实现，比如一行三列，每列就是33.33%，高度 ...

随着手机等移动设备的普及，移动端带来的流量已经不可忽视，一个网站不只是只有pc的页面就足够了，移动端的适配已经势在必行。但是移动设备种类繁多，屏幕尺寸也千奇百怪，能不能找到一种方式可以适配所有的手机屏幕呢？ 答案就是rem。 俗话说 “授人以鱼不如授人以渔”，但今天我就反其道而行，就是授人以鱼 ...

移动端 H5 页面不可遗忘的 meta 标签 viewport 这行代码的作用是设置视口的宽度（其实就是页面的宽度）等于设备宽度，页面不缩放并且也不允许用户进行缩放。 把一个普通的PC端页面（未加入上面 meta 标签的）直接放在手机端访问是可以展示完全的，但是页面明显经过缩放。可以用 ...