一. 移动端基础知识

在移动端开发时，我们经常发现出现布局后有不兼容的问题，如何在不同设备上进行适配呢，希望康完这边，你能从原理到应用彻底熟悉移动端适配。

1.1 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者，我们希望不用关注这些分辨率，因为我们常用的尺寸单位是 px 。

1.2 作为开发者我们需要知道

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

二. 视口

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加 meta视口标签

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

三. 二倍图

3.1 什么是Retina技术

在PC端和早期的手机屏幕中: 1CSS像素 = 1 物理像素。
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

3.2 倍图

对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。所以在标准的viewport设置中，需要使用倍图来提高图片质量，解决在高清设备中的模糊问题。在5050的div中，通常要放原始尺寸为100100的图。而不同设备的视口宽度，开发尺寸，物理像素比等不同，这就是移动端各种不兼容的基本原因。

四. 移动端常见布局

4.1 流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。它通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

4.2 flex布局

操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持。
ppt来源：传智黑马

4.3 rem布局

rem是什么的单位：rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

4.4 响应式布局

响应式的原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。
通常媒体查询的划分是这样的：
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

五. 使用插件postcss-px-to-viewport

大的方向上，我们可以使用flex，rem等进行布局，但当细分到每一个小地方时，比如一张图片，一段文字，一般会写一个固定的高度。比如，iphone6/7/8的视口是375*667，当我们根据设计稿写好页面后，如果你用谷歌浏览器调试模拟在其他设备上的效果，你可能会发现许多元素“脱离”了原来的位置。因为你在网页布局中使用的是px。
怎么解决呢？
聪明的你可能已经想到，如果把所有用px做单位的地方换成视口的尺寸做单位，也许能有较好的适配效果。
铺垫了这么多，我们今天的主角：插件postcss-px-to-viewport终于要闪亮登场了。
话不多说，直接看使用步骤。

5.1 安装

npm install postcss-px-to-viewport --save -dev

npm使用就不用多说了8

5.2 创建配置文件

在项目的根目录下，创建postcss.config.js

以后有机会可以做一期webpack vue-cli git这些什么的~

5.3 配置

不多说，每项都举个例，宁就懂了。这是我在一个项目里的配置，基本所有会用到的参数设置都用到了，详见注释。

module.exports = {plugins: {autoprefixer: {},"postcss-px-to-viewport": {viewportWidth: 375,  //视窗宽度，对应设计稿宽度viewportHeight: 667, //视窗高度unitPrecision: 5,    //px转vw单位时精确到小数点后第几位viewportUnit: 'vw',  //视窗单位，建议vwselectorBlackList: ['ignore','tab-bar','tab-bar-item'],   //要忽略的，即不需要转换的类minPixelValue: 1,    //小于或等于1px的不转换mediaQuery: false,   //是否允许媒体查询exclude: [/TabBar/]  //忽略，不转换的文件，用js里的正则}}
}

还等什么，去你的项目里试试8，芜湖起飞~
觉得有用的话欢迎点赞评论，以后vue系列会努力更新其他内容，有想看的朋友也可以留言。

Vue笔记（二）如何做移动端适配让你只用关心设计稿相关推荐

vue做移动端适配最佳解决方案，亲测有效
最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案 ...
大厂是怎么做移动端适配的？(收藏篇)
文章先讲一下几种常见的适配方案,然后再看看几个大厂(腾讯.京东.网易.小红书.微博.美团.B站.搜狐.饿了么.携程.大众点评.知乎.拍拍贷.陆金所)的移动端页面都采用了什么样的适配方案,最后讨论下各个 ...
【移动端适配二】H5移动端适配屏幕安全区（ios和android）
全面屏手机把整个webview(包括状态栏)给H5的话,不对状态栏进行控制往往会有以下如图问题出现,这样头部的返回按钮置于页面的安全区外,无法进行操作. 有问题的: 想要的效果: 具体的实现: 针对i ...
Zynq笔记（一） —PL端（FPGA部分）的设计流程
文章目录前言一.PL部分 1.创建工程 2.添加.V文件 3.编写程序后分析综合(就是普通的verilog程序) 4.编写仿真文件并进行仿真(和上述方法一样,只是在添加文件的时候选择仿真文件即可) ...
一文搞定移动端适配！
作者 | 好学习吧丶责编 | 郭芮手机市场日渐丰富的同时,给我们前端开发人员带来的 "网页内容自适应屏幕尺寸进行显示的问题" 也日渐凸显出来,接下来我们就要细说移动端适配的前世 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基 ...
【前端】页面适配？移动端适配屏幕的各种解决方案！
前言由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽 ...
关于移动端适配的几个方法，快速构建响应式网站必备知识
随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面. 但是我们同样要维持pc端,因此难免会遇到许多麻烦. 而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要合理 ...

Vue笔记（二）如何做移动端适配让你只用关心设计稿

一. 移动端基础知识

1.1 手机屏幕现状

1.2 作为开发者我们需要知道

二. 视口

三. 二倍图

3.1 什么是Retina技术

3.2 倍图

四. 移动端常见布局

4.1 流式布局（百分比布局）

4.2 flex布局

4.3 rem布局

4.4 响应式布局

五. 使用插件postcss-px-to-viewport

5.1 安装

5.2 创建配置文件

5.3 配置

Vue笔记（二）如何做移动端适配让你只用关心设计稿相关推荐

最新文章

热门文章

Vue笔记 （二） 如何做移动端适配 让你只用关心设计稿

一. 移动端基础知识

1.1 手机屏幕现状

1.2 作为开发者我们需要知道

二. 视口

三. 二倍图

3.1 什么是Retina技术

3.2 倍图

四. 移动端常见布局

4.1 流式布局（百分比布局）

4.2 flex布局

4.3 rem布局

4.4 响应式布局

五. 使用插件postcss-px-to-viewport

5.1 安装

5.2 创建配置文件

5.3 配置

Vue笔记 （二） 如何做移动端适配 让你只用关心设计稿相关推荐

最新文章

热门文章

Vue笔记（二）如何做移动端适配让你只用关心设计稿

Vue笔记（二）如何做移动端适配让你只用关心设计稿相关推荐