移动端rem布局(阿里)
该方案使用相当简单,把下面这段已压缩过的 原生JS(源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script>
代码原理
这是阿里团队的高清方案布局代码,所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成)
动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果。
有何优势
引用简单,布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。(老方案是,屏幕越大元素越大;此方案是,屏幕越大,看的越多)
有效解决移动端真实1px问题(这里的1px 是设备屏幕上的物理像素)
如何使用
重要的事情说三遍!
绝不是每个地方都要用rem,rem只适用于固定尺寸!
绝不是每个地方都要用rem,rem只适用于固定尺寸!
绝不是每个地方都要用rem,rem只适用于固定尺寸!
在相当数量的布局情境中(比如底部导航元素平分屏幕宽,大尺寸元素),你必须使用百分比或者flex才能完美布局!
此方案也是默认 1rem = 100px,所以你布局的时候,完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ,那你直接可以这样写样式:
.myBtn {
width: 0.55rem;
height: 0.37rem;
}
4.问:高清方案在微信上,有时候字体会不受控制变的很大,怎么办?
问题已解决。
问题原因:
在X5新内核Blink中,在排版页面的时候,会主动对字体进行放大,会检测页面中的主字体,当某一块字体在
我们的判定规则中,认为字号较小,并且是页面中的主要字体,就会采取主动放大的操作。然而这不是我们想要的,可以采取给最大高度解决
解决方案:
后续:经过项目实践,还是决定给 max-height 一个具体数值比较好,之前给的是 100% ,但有自身的局限性,比如 antd 的轮播组件在 max-height:100% 的情况下就不能正常显示。
转载于:https://www.cnblogs.com/zhouyx/p/6830412.html
移动端rem布局(阿里)相关推荐
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- 移动端rem布局基本介绍及原理
rem布局 em和rem的认识 在布局中,除了px之外,还有两个常见的单位,em和rem em: 相对于当前元素的字体大小→ 1em = 当前标签的font-size rem: 相对于根元素(html ...
- 移动端rem布局实例
逆战班学生记录: rem理解: em是一个相对单位,1em等于当前元素或父元素的font-size值 rem是指相对于根元素的字体大小的单位.简单的说它就是1个html标签的font-size大小. ...
- H5移动端rem布局还原750px设计稿方案。
引入对应的脚本: <!DOCTYPE html> <html> <head><meta charset="utf-8" />< ...
- 移动端REM布局方案
引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案 下载地址https://github.com/hupan50 ...
- 移动端rem布局与高清屏幕适配
移动端视口在没设置情况下是980 document.documentElement.clientWidth window.screen 复制代码 逻辑像素和物理像素 拿iphone4为例,横向逻辑像素 ...
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面. Android的可以通过webview配置webview.getSettings().setText ...
- 移动端rem布局的理解
链接: https://blog.csdn.net/u011520348/article/details/51461077
最新文章
- 深度学习LiDAR定位:L3-Net
- 团队工具_「管理工具」部门有效管理的5个工具,打造高效团队
- 【Cocos2d实例教程一】xcode5下Cocos2d环境的搭建
- IBM的大数据就是返朴归真
- 哈士奇与阿拉斯加的区别!
- python jieba库用法
- 编程之美3——N!末尾有多少个0
- js的深浅拷贝( 赋值后原值被覆盖的问题 )
- MyBatis 在xml文件中处理大于号小于号的方法
- 怎么查看python文件的代码_python实现代码查看列举目录下的文件
- canal 入门(1)
- linux 使用 byzanz 生成 gif 图片程序
- sqlmap使用手册
- mysql数据库索引使用总结和对比
- 小程序页面收录 sitemap
- java for循环
- win10打开软件显示c盘服务器,【解决】win10 打开本地磁盘 提示找不到应用程序...
- 2021年中国乳制品行业发展现状分析,“双循环”助力行业发展「图」
- 虚函数多态性实现求几何图形面积
- cbm+soma+simm ibm的SOA实施方法论
热门文章
- 通信中的ATM cell:ATM信源结构
- 图论---桥(割边)
- Codeforces Round #468 (Div. 2): D. Peculiar apple-tree(水题)
- bzoj 1786 bzoj 1831: [Ahoi2008]Pair 配对(DP)
- bzoj 1625: [Usaco2007 Dec]宝石手镯(01背包)
- 香农编码的 matlab 实现
- js中数组反向、排序reverse、sort
- js系列教程12-浏览器存储全解
- 杭电ACM hdu 2079 选课时间 (模板)
- weblogic发序列化命令执行漏洞工具分享