移动端适配知识梳理

mozillazg 发布于2019-08-20 14:21 / 2770人阅读

摘要：屏幕适配是移动端开发中不可避免的一个问题，也是前端人员必须了解清楚的一个问题。了解移动端的知识是用户网页的可视区域。移动端适配的几种方案是指相对于根元素的字体大小的单位，我们可以通过设置的字体大小就可以控制的大小。

屏幕适配是移动端开发中不可避免的一个问题，也是前端人员必须了解清楚的一个问题。

了解移动端的知识

viewport
viewport是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
像素
css中的像素只是一个抽象的单位，早期的手机屏幕像素密度较低，一个css像素等于一个物理像素。但是随着手机的屏幕像素密度越来越高，比如Retina，相同的手机尺寸，分辨率却提高了一倍，这就意味着同样大小的屏幕上，像素多了一倍，这时一个css像素是等于两个物理像素的。
在移动端浏览器中，window对象有一个dpr属性(设备物理像素和设备独立像素的比例)，也就是说dpr=物理像素/独立像素，所以在Retina屏幕中，dpr=2，看图说话。

meta
在移动端开发时，我们需要在头部加上一句

width：控制viewport的大小，可以指定的一个值或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS像素）。

height：和width相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

移动端适配的几种方案

rem
rem是指相对于根元素的字体大小的单位，我们可以通过设置html的字体大小就可以控制rem的大小。
需要注意的是，字体的大小不要用rem，我们可以根据不同的dpr做相应的处理。
方法一
可以用css3的媒体查询@media，这种方法可以适配大部分机型。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

方法二
想要实现多终端适配，这里推荐手淘团队的lib-flexible库，具体实现方法可以参考https://github.com/amfe/artic...
方法三
css3的新单位vw，vh。1vw等于可视区宽度(屏幕的可视区域即布局区域)的百分之一，1vh等于可视区高度的百分之一。可惜这个单位目前还有很多浏览器不支持。

目前我知道的方法就这几个，如果还有希望大家补充。

GPU云服务器云服务器移动端适配移动端适配方案移动端适配 js 移动适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81559.html

HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
前端文章- 收藏集 - 掘金

摘要：我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端，是一件很难的事吗在今天，我也没有想好一个答案，也不知道怎样给出一个答案。其他不多说了，这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料（不定期更新） - 前端 - 掘金GitHub 上学习前端开发的资料（不定期更新）... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

sugarmo 2019-08-20 18:27 评论0 收藏0
前端文章- 收藏集 - 掘金

摘要：我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端，是一件很难的事吗在今天，我也没有想好一个答案，也不知道怎样给出一个答案。其他不多说了，这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料（不定期更新） - 前端 - 掘金GitHub 上学习前端开发的资料（不定期更新）... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

Pocher 2019-08-29 13:05 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0