基本概念

1、单位

Px(CSS pixels)

  • 像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的
  • 其实是相对于某个设备而言的,不同设备指定的值大小还是有区别的

em

  • 1em与当前元素的字体大小相同(更具体地说,一个大写字母M的宽度)。CSS样式被应用之前,浏览器给网页设置的默认基础字体大小是16像素,这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小,所以如果在父元素上设置了不同的字体大小,em的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。

ex, ch

  • 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。

rem

  • REM(root em)和em以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用,所以这听起来像一个比em更好的选择,虽然在旧版本的IE上不被支持 查看关于跨浏览器支持 Debugging CSS.)

vw,vh

  • 分别是视口宽度的1/100和视口高度的1/100,其次,它不像rem那样被广泛支持。 还有vmin,vmax...

百分比

rem 和 vw 兼容对比

  • rem

  • vw

2、关于window.devicePixelRatio

mdn

  • 此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。

那么什么是设备的物理像素?

  • 物理像素(physical pixel):设备能控制显示的最小单位。设备独立像素(DIP,device-independent pixel,density-independent pixel):独立于设备的用于逻辑上衡量像素的单位

  • 对于前端来说,可以理解成在设备上能设置的最小值。如在dpr = 1 最小值1px; dpr = 2 最小值为0.5px

PPI(pixel per inch)

  • 每英寸有多少个像素点(设备像素点),PPI越高,画质越好。

公式

// w: 横向pixel
// h: 纵向pixel
// inch: 屏幕尺寸
PPI = Math.sqrt(w * w + h * h) / inch console.log(Math.ceil(Math.sqrt(1920 * 1920 + 1080 * 1080) / 5.5))
// 然而我并不明白怎么要这样算 不是应该是 w * h / inch ?????

retina 显示屏

具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏

3、移动适配注意的点

  1. 屏幕尺寸不一样的适配问题

    • 这个可以借助vw完美解决
  2. 图片模糊问题

    • 图片用三倍图 可以保证清晰,推荐用两倍图+webp格式 开发和显示效果折中的结果
  3. 1px 显示问题

    • 方法很多
  4. api不支持的兼容问题

    • vw不支持的兼容
  5. 高清显示

    • 是否影响渲染性能??待考证
    • 缩放是否可以是网页更高清?

  1. 第三方组件库兼容问题
  2. 富文本显示问题
  3. 前端代码迁移单位不一致问题

适配方案

1、经典的flexble.js方案

存在问题

  • 1、iframe 问题
  • 2、富文本问题
// vue指令
// 1. 先获取dpr 2获取每个文档对象的字体大小 乘以dpr
Vue.directive('richtext', (el, binding) => {
Vue.nextTick(() => {
let dpr = document.querySelector('html').getAttribute('data-dpr')
let f = (dom) => {
let fontPx = dom.style && dom.style.fontSize
if (fontPx) {
fontPx = fontPx.substr(0, fontPx.length - 2) * parseInt(dpr)
dom.style.fontSize = fontPx + 'px'
}
if (dom.childNodes.length > 0) {
for (let i = 0; i < dom.childNodes.length; i++) {
f(dom.childNodes[i])
}
}
}
f(el)
})
})
// 使用方法
.richtext(v-html="content" v-richtext='')

3、高清方案存在的误区

dpr越高越清晰 是源自设备本身和缩放关系不大或者说当dpr为1时清晰度已经足够了,不需要再通过缩放来是网页显示更清晰(实践总结,未找到资料支持)

4、兼容问题

https://juejin.im/post/5b9cb9d26fb9a05d1b2e44a3

2、vw方案

参考

3、rem + vw (推荐方案)

设置html根font-size的值

// 设计稿 750 * 1334

html {
height: 100%;
font-size: 50px; // 向下兼容 不止vw时候 写死font-size
font-size: 13.33333333vw; // 7.5rem === 100vw
margin: 0 auto;
} @media (min-width: 560px) { // pc兼容
html,body {
font-size: 54px;
max-width: 540px;
}
} @media (max-width: 1024px) { // ipad兼容:ipad最大1024px
html,body {
max-width: 1024px;
}
}

1px显示问题 物理像素 dpr>=2 取2倍

.border-bottom {
position: relative;
&::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
background-color: red;
height: 1px;
left: 0;
right: 0;
bottom: 0;
@media only screen and (min-resolution: 2dppx) { // 非标准的
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
}
// only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到
// -webkit-device-pixel-ratio 是一个非标准的布尔类型CSS媒体类型,是标准
// resolution 媒体类型的一个替代方案.

单位要怎么写

方法一:postcss-px2rem(vue-cli3)

这里不推荐 因为px2rem: 写px时需要加上 /*no*/ 感觉比较麻烦

const px2rem = require('postcss-px2rem')
const postcssPx2rem = new px2rem({
remUnit: 50 // 基准大小
})
css: {
loaderOptions: {
postcss: {
plugins: [postcssPx2rem]
},
}
},

方法二:目前方案是直接写 7.5rem=100vw 设计稿除以100即可

方法三:px2rem的编辑器插件如vscode的cssrem

除不尽的问题 (calc)

涉及到兼容问题

总结 vw + rem的好处

  • 实现简单

    • 不依赖插件及第三方库
    • 几行css代码 就可以实现
  • 开发方便
    • 100vw === 设计稿 / 100 rem 方便换算
    • 不影响px使用,完美兼容第三方组件库
    • 不存在富文本和iframe等兼容问题

利用vw+rem实现移动web适配布局的更多相关文章

  1. rem - 移动前端自适应适配布局解决方案和比较(转载)

    原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...

  2. 移动web开发之rem适配布局

    移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...

  3. PostCSS的插件 -- 关于vue rem适配布局方案

    PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...

  4. 移动web适配利器-rem

    移动web适配利器-rem 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移 ...

  5. 移动端布局方案—vw+rem

    前言 首先你要知道 vw 和 rem 是什么?怎么使用? ①:简单来说 vw 是视口单位,相当于把视口等分成了100,1vw = 1; ②:rem是相对单位,设置根元素 html 的 font-siz ...

  6. 逐帧动画抖动、适配布局、SVG Sprites

    笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...

  7. rem是如何实现自适应布局的?

    http://caibaojian.com/web-app-rem.html 使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应适配也是同个道理,不过是js更精确一点.使用媒体查询: html ...

  8. rem 是如何实现自适应布局的

    摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.本文讲的是如何使用rem实现自适应.· rem这是个低调的css单位,近一 ...

  9. rem是如何实现自适应布局的

    原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...

随机推荐

  1. CF321E Ciel and Gondolas 【决策单调性dp】

    题目链接 CF321E 题解 题意:将\(n\)个人分成\(K\)段,每段的人两两之间产生代价,求最小代价和 容易设\(f[k][i]\)表示前\(i\)个人分成\(k\)段的最小代价和 设\(val ...

  2. Linux上给php配置redis扩展

    说明,在项目开发中难免会遇到redis中,那我应该如何配置redis这样的一个扩展呢,看下面流程: 一.安装Redis PHP在安装redis扩展时,难免要看一下官网下载安装流程,链接如下: http ...

  3. std::function 使用_

    #include <iostream> #include <functional> //函数指针写法 typedef int(*FuncPoint)(const int& ...

  4. SSO基于cas的登录

    概念介绍 1.定义 CAS ( CentralAuthentication Service ) 是 Yale 大学发起的一个企业级的.开源的项目,旨在为 Web 应用系统提供一种可靠的单点登录解决方法 ...

  5. GO_00:Mac之Item2的配置安装

    申明:Mac 本上的终端感觉不是那么多好用,以前在 Windows 上操作 Linux 都是通过 XShell 来操作的,界面美观大方.操作使用比较简单.故在 Mac 上也需要有这样一款类似的工具,那 ...

  6. Docker生产实践(六)

    镜像构建思路 思路:分层设计 最底层:系统层,构建自己适用的不同操作系统镜像: 中间层:根据运行环境,如php.java.python等,构建业务基础运行环境层镜像: 最上层:根据具体的业务模块,构建 ...

  7. windows配置Python多版本共存

    windows配置Python多版本共存 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近Python开发蛮火的,三年前我的一个运维朋友就告诉我说Python语言将来会很火,当时 ...

  8. Mongodb 笔记06 副本集的组成、从应用程序连接副本集、管理

    副本集的组成 1. 同步:MongoDB的复制功能是使用操作日志oplog实现的,操作日志包含了主节点的每一次写操作.oplog是主节点的local数据库中的一个固定集合.备份节点通过查询整个集合就可 ...

  9. spring-data-redis,jedis和redis主从集成和遇到的问题

    Redis主从加哨兵的部署详见http://www.cnblogs.com/dupang/p/6414365.html spring-data-redis和jedis集成代码总体结构 代码地址http ...

  10. MyEclipse和Eclipse中jsp、html格式化自动排版问题

    一.myeclipse的漂亮排版设置 步骤: 在左侧快捷 “搜索” 框里面输入 html . 点击选中左侧HTML Source . line - width 是设置当前行里面有多少字符时,就换行.这 ...