基础知识

像素相关

1、像素 :像素是屏幕显示最小的单位。

2、设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

3、逻辑像素(logical pixel):独立于设备的用于逻辑上衡量像素的单位。CSS 像素就是逻辑像素,CSS 像素是 Web 编程的概念。

4、设备独立像素(density-independent pixel):简称 dip ,单位 dp ,独立于设备的用于逻辑上衡量像素的单位 。且逻辑像素 ≈ 设备独立像素。

5、设置像素比(device pixel ratiodpr):dpr = 物理像素 / 设备独立像素。可通过 window.devicePixelRatio 获取。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个 CSS 像素即:几 dpr。普通 Android 是一倍屏,在 Retina 屏的 iPhone 上,devicePixelRatio 的值为 2,也就是说 1 个 CSS 像素相当于 2 个物理像素。通常所说的二倍屏(Retina)的 dpr 是 2, 三倍屏(IPhoneX 等)是 3 。

viewport 相关

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

  1. visual viewport 可见视口 :屏幕宽度window.innerWidth/Height
  2. layout viewport 布局视口 :DOM宽document.documentElement.clientWidth/Height
  3. ideal viewport 理想视口 :使布局视口就是可见视口
  4. width=device-width :表示宽度是设备屏幕的宽度
  5. initial-scale :表示初始的缩放比例
  6. minimum-scale :表示最小的缩放比例
  7. maximum-scale :表示最大的缩放比例
  8. user-scalable :表示用户是否可以调整缩放比例

总结现有方案优劣

现有屏幕适配方案 :

  • 设置 viewport 的 scale 值为 1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • 根据屏幕的分辨率动态设置 html 的文字大小,达到等比缩放的功能

375 屏幕为 20px,以此为基础计算出每一种宽度的字体大小

  Rem.less 中设置其他基础尺寸 @bps :320px, 360px, 375px, 400px, 414px, 480px, 768px, 1024px

    • 并计算相应的比例缩放:

.loop(@i: 1) when (@i <= length(@bps)) {  //注意less数组是从1开始的
@bp: extract(@bps, @i);
@font: round(@bp/@baseWidth*@baseFont, 1);
@media only screen and (min-width: @bp){
html {
font-size: @font !important;
}
}
.loop((@i + 1));
};
  • 然后在 variables.less 中设置比例和行高:

@2ptr : 1/2/20rem @ptr : 1/20rem

  • 最后所有 CSS 使用 @2ptr 和 @ptr 利用 rem 缩放 dom 、字体

其他主流适配方案优劣

方案:

1. 媒体查询 Media Queries

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

  • 优点:

    • Media Queries 可以做到设备像素比的判断,方法简单,成本低,特别是对移动和 PC 维护同一套代码的时候。目前像 Bootstrap 等框架使用这种方式布局
    • 图片便于修改,只需修改 CSS 文件
    • 调整屏幕宽度的时候不用刷新页面即可响应式展示
  • 缺点:
    • 代码量比较大,维护不方便
    • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
    • 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

2. Flex 弹性布局

  • 固定 viewport 的高度等于设备高度,宽度自适应,元素都采用 px 做单位
<meta name="viewport" content="width=device-width,initial-scale=1">
  • 随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻)
  • 优点:布局更加精简,直接用 CSS 的方式,你不用再引入 Bootstrap ,使用栅格系统
  • 缺点:IE10 及 IE10 以上才支持,所以目前主要应用在移动端上

3. rem + viewport

    • 根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位
    • 根据 rem 将页面放大 dpr 倍, 然后 viewport 设置为 1 / dpr

      如 iPhone6 plus 的 dpr 为 3, 则页面整体放大 3 倍, 1px (css单位)在plus下默认为 3px (物理像素)

    • 然后 viewport 设置为 1/3, 这样页面整体缩回原始大小,从而实现高清。这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是 device-width 。这个 device-width 的计算公式为:
      设备的物理分辨率 / (devicePixelRatio * scale),在 scale 为 1 的情况下,device-width = 设备的物理分辨率 / devicePixelRatio

rem弊端

iOS 与 Android 平台的适配方式背后隐藏的设计哲学是这样的:阅读文字时,可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。(可以这样简单理解:A4 大小的报纸和 A3 大小甚至更大的报纸,舒适的阅读字号绝对尺寸是一样的,因为他们都需要拿在手里阅读,在手机也是上同理)。在看图片视频时,图片、视频的比例应该是固定的,不应该出现拉伸变形的情况。而 rem 用在字号时,使字号在不同屏幕上的绝对尺寸不一致,违背了设计哲学。

浏览器兼容
  • 不支持 IE 8.0 以下 、Safari 4.0 以下、FireFox 3.5以下

4. VW适配

如何在Vue项目中使用vw实现移动端适配

vw 可以轻松搞定弹性布局,流体布局。vw 逻辑非常清晰其实 vw 的方案的写法和 flexible 方案的写法一致
~~因为 flexible 其实就是用 hack 的手段模拟了 vw 的实现而已。
具体写法:针对 750px 的设计稿,将相应的 px 值除以 75 就是 vw 的值。

使用 vw 来实现页面的适配,并且通过 PostCSS 的插件 postcss-px-to-viewport 把 px 转换成 vw 。这样的好处是,我们在撸码的时候,不需要进行任何的计算,你只需要根据设计图写 px 单位。postcss-px-to-viewport 插件主要用来把 px 单位转换为 vw 、vh 、vmin 或者 vmax 这样的视窗单位,也是 vw 适配方案的核心插件之一。

为了更好的实现长宽比,特别是针对于 img、video 和 iframe 元素,通过 PostCSS 插件postcss-aspect-ratio-mini 来实现,在实际使用中,只需要把对应的宽和高写进去即可。

    • 优点:rem ,使用 vw 和 wh 是非常直观的,让其他人看到就能知道,该界面是以怎么样的结构进行布局,利于维护
    • 缺点:vw 在一些三星的机子会有兼容问题,导致失效,以及不同浏览器兼容问题

Web 端屏幕适配方案的更多相关文章

  1. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

  2. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  3. 移动端font-size适配方案

    概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...

  4. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  5. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  6. Android 屏幕适配方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...

  7. 实用Android 屏幕适配方案分享

    转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...

  8. 给你一个全自动的屏幕适配方案(基于SW方案)!—— 解放你和UI的双手

    Calces系列相关文章:Calces自动实现Android组件化模块构建 前言 屏幕适配一直是移动端开发热议的问题,但是适配方案往往在实际开发的时候会和UI提供的设计稿冲突.本文主要是基于官方推荐的 ...

  9. 移动端font-size适配方案(续)

    概述 之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有 ...

随机推荐

  1. android gson使用

    第一步注册:  compile 'com.google.code.gson:gson:2.6.2' 第二步初始化: Gson gson = new GsonBuilder() .setLenient( ...

  2. blockchain 区块链的开发,基于python或node js

    现在很多人用node js做区块链的开发,因为点对点并发是区块链中的难点技术之一,而node js天然的对并发支持比较好,因此比较有优势. http://ecomunsing.com/build-yo ...

  3. 【转】Deep Learning(深度学习)学习笔记整理系列之(三)

    好了,到了这一步,终于可以聊到Deep learning了.上面我们聊到为什么会有Deep learning(让机器自动学习良好的特征,而免去人工选取过程.还有参考人的分层视觉处理系统),我们得到一个 ...

  4. sqlserver三种分页方式性能比较

    Liwu_Items表,CreateTime列建立聚集索引 第一种,sqlserver2005特有的分页语法 declare @page intdeclare @pagesize intset @pa ...

  5. [golang note] 网络编程 - RPC编程

    net包 • 官方文档 http://godoc.golangtc.com/pkg/net/ Package net provides a portable interface for network ...

  6. MDI QMdiArea 多文档区域

    Qt下创建类似window平台的MDI多文档区域使用QMdiArea QMdiArea * mdiArea; mdiArea = new QMdiArea(this); //A widget 为win ...

  7. Atcoder CADDi 2018 Solution

    C - Product and GCD Solved. 题意: 给出$n个数$的乘积,求$这n个数$的最大的可能是GCD 思路: 分解质因子,那么$每个质因子的贡献就是其质因子个数/ n的乘积$ #i ...

  8. url的正则表达式

    http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?  

  9. selenium+java破解滑动验证码

    2019-04-16更新 修复极验页面改版,这次采用极验官方的demo地址:https://www.geetest.com/demo/slide-bind.html 截止2019-04-16,极验和腾 ...

  10. 20145311 《Java程序设计》第六周学习总结

    20145311 <Java程序设计>第六周学习总结 教材学习内容总结 第十章(Input&&Output) 10.1InputStream OutputStream 10 ...