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

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

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

主要要解决的适配问题有 1. 元素自适应问题 2. 文字大小和边框问题 3. 高清图问题 4. 1像素问题 5. 横竖屏显示问题 我们css中的1px，通常叫做css像素（虚拟像素），物理像素 与虚拟像素的比就称为设备像素比(dpr) 现在现代浏览器都支持 ...

考虑到网站的在多种设备下的兼容性，有很多网站会有手机版和电脑版两个版本。访问同一个网站URL，当服务端识别出用户使用电脑访问，就打开电脑版的页面，用户如果使用手机访问，则会得到手机版的页面。 nginx判断设备根据useragent,国外有个开源的User-Agent区分pc和手机的解决方案 ...

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1）选取一款手机的屏幕宽高作为基准(比如 iphone6的375×667)。 2）对于高清屏幕，为了达到高清效果，视觉稿的画布大小会是基准的2倍（对iphone6而言：原先的375×667，就会变成750×1334 ...

原文链接：https://www.cnblogs.com/MaggieGao/p/6994868.html 一 怎么书写可以适用于不同设备的页面 　　　1 自动适应屏 ...

1、安装相应依赖 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext po ...