【H5适配 笔记1】rem适配
设备像素比(dpr)= 物理像素(手机渲染像素、分辨率)/设备独立像素(手机所显示元素的大小)
视口(viewport)
布局视口(获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距。):
document.documentElement.clientWidth / clientHeight
视觉视口(获取浏览器视觉视口高度(包括垂直滚动条)):
window.innerWidth / innerHeight
理想视口(屏幕大小,设备的分辨率/设备像素比):
screen.width / height
当页面缩放比例为100%
时,CSS像素 = 设备独立像素
,理想视口 = 视觉视口
。
Meta viewport
借助<meta>元素的viewport来设置视口、缩放。
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
1px问题
在设备像素比 > 1的设备上,渲染 1px 实际上被多个物理像素填充,所以对于有些屏幕看起来1px比实际粗
@svg border_1px {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.example { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; }
rem 适配
rem
是相对于html
节点的font-size
来做计算的,将font-size设为布局视口的1/10,相当于1rem = 1/10 * 布局视口宽度
//自适应设备
(function (doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var recalc = function () {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
docEl.dataset.percent = 100;
docEl.style.fontSize = width / 10 + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
viewport 适配(大部分浏览器已经兼容,原理类似rem)
1vw = 1% window.innerWidth;1vh = 1% window.innerHeight
参考资料:https://juejin.im/post/5cddf289f265da038f77696c
【H5适配 笔记1】rem适配的更多相关文章
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
- 最佳移动端h5自适应rem适配方案
一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动web开发适配方案之Rem
移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...
- 移动Web开发与适配笔记
项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...
- & vue项目中的rem适配
有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
随机推荐
- 2019全国大学生信息安全大赛两道web
简单小结 菜鸟第一次打国赛,这次题目质量很高,学到了许多姿势. Web Justsoso 打开题目,源代码出存在提示: 使用LFI读取index.php与hint.php http://d4dc224 ...
- 一次压力测试Bug排查-epoll使用避坑指南
Bug复现 使用Webbench对服务器进行压力测试,创建1000个客户端,并发访问服务器10s,正常情况下有接近8万个HTTP请求访问服务器. 结果显示仅有7个请求被成功处理,0个请求处理失败,服务 ...
- 【WPF学习】第四十九章 基本动画
在前一章已经学习过WPF动画的第一条规则——每个动画依赖于一个依赖项属性.然而,还有另一个限制.为了实现属性的动态化(换句话说,使用基于时间的方式改变属性的值),需要有支持相应数据类型的动画类.例如, ...
- SQL Server 2019 安装教程
SQL Server 2019 安装教程 下载安装SQL: 1.下载SQL Server 2019 Developer 官方网址:下载地址. 2.下拉选择免费版本,直接点击下载(别问,问就是家境贫寒
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- ES相关知识
ElkStack介绍 对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kibana(展示),我 ...
- ubuntu18.04管理redis
ubuntu下 redis的安装使用 安装 1. 进入redis安装路径 cd ~/installed/redis-5.0.7 2. 启动redis 启动服务端redis-server 启动客户端(必 ...
- 小白的linux笔记1:CentOS 8 安装与设置
为了在服务器上跑爬虫,以及学SegNet,研究了一圈看来linux是必学品了.在自己电脑上安装了一个 1.官网下载iso,一个linux dvd是稳定版,选之,另一个stream版是更新更快的测试版, ...
- 简单配置让iterm2用得更爽
同步自本人独立博客:https://liushiming.cn/2020/01/15/awesome-iterm2-config/ 概述 iterm2比mac原生的terminal好用很多,是mac下 ...
- adams技巧汇总
T+左键 平动模型 R+左键 旋转模型 Z+左键 动态缩放 F或Ctrl+F 以最大比例全面显示模型 S+左键 沿着垂直于屏幕的轴线旋转 ...