手机端页面自适应解决方案
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了
(function (doc, win) {var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
如何使用?
这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
于是,问题来了,为什么要这样?别急,我先来一一回答
- 为什么是640px?
对于手机屏幕来说,640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面,你可以先把效果图宽度等比例缩放到640px,很好用。 - 为什么要设置html的font-size?
rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。
此时,此时宽60px,高40px的元素样式就这样设置如下 ↓width: 3rem; height: 2rem;
那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓
width: 2.75rem; height: 1.85rem;
是不是发现这换算起来有点麻烦啊,,,(当然,你要是心算帝请无视)
如果我们一开始把html的font-size设为100px呢?此时1rem = 100px,那么上面的宽,高就可以这么设置 ↓width: 0.55rem; height: 0.37rem;
是不是换算起来简单多了?!
(当然可能有同学问,为什么不一开始把html的font-size设为1px呢,这样换算起来也简单,答:浏览器一般都有最小字体限制,比如谷歌浏览器,最小中文字体就是12px,所以实际上没有办法让1rem=1px。)
根据上面的js代码,如果页面宽度低于640px,那么页面中html的font-size也会按照(当前页面宽度/640)的比例变化。这样,页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了! - 都哪些情况可以用rem布局?
大部分情况下都可以用rem布局这个方法,当然具体还要看情况而定。拿我们公司项目举例,只有底部的导航不用rem,而是用的flex布局。因为导航点击最多,所以给它一个固定的大小(其实就是高度固定,宽度自适应的方案)。大家可以看看淘宝的这个手机页面 淘宝手机站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。
个人心得
在rem布局中,有一些自己积累的小技巧给大家分享下。
- 页面中模块间距离一般为0.2rem。字体的大小一般分为四个档次 0.2rem 0.24rem 0.28rem 0.32rem。
- 拿我们项目举例,我们移动端页面效果图的宽度都定在了640px。于是我在项目中,最外层的div样式就设置成了
position: relative; width: 100%; max-width: 640px; min-width: 320px; margin: 0 auto;
所有的元素都可以写在这个div中了,于是就可以开始写样式了
- rem布局中,如果有个元素需要水平居中固定到页面底部,你会怎么设置它的样式呢。
我是这样做的,前提是这个元素还是在前面说的最外层水平居中的大div中,样式如下position: fixed; bottom: 0; z-index: 100; width: 100%; max-width: 640px; min-width: 320px;
转载于:https://www.cnblogs.com/Apollo/p/5536709.html
手机端页面自适应解决方案相关推荐
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
- html+手机自适应源码,手机端页面自适应解决方案—rem布局(进阶版,附源码示例)...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
- 手机端页面 自适应解决方案-收集
响应式是按照pc,pad,mobile 不同尺寸显示不同的布局内容,通过媒体查询. 自适应是手机端根据屏幕宽度做等比例的缩放. 参考 https://www.cnblogs.com/panxiangf ...
- 手机端页面自适应解决方案—rem布局
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchan ...
- 安卓+ios系统--手机端页面自适应手机屏幕大小,禁止手动放大和缩小VUE
项目需求 手机端,页面自适应手机屏幕大小,不能手动放大和缩小. 1.代码 在index.html中加入下面的代码: <!-- 手机端页面自适应手机大小,禁止手动放大 --> <met ...
- h5手机端页面自适应屏幕大小 rem
1.在首页添加一段js,页面字体单位使用rem. <script>(function (doc, win) {var docEl = doc.documentElement,resizeE ...
最新文章
- apollo mqtt linux qt,MQTT第5版更新,以及如何应用到Qt MQTT模块中
- python 一些方法的时间测试
- 【转载】ubuntu下/usr/bin和/usr/local/bin的区别
- 三大新兴力量,引领中国消费新经济丨图媒体
- CTF Geek Challenge——第十一届极客大挑战Crypto Write Up
- 免费开放阅读 | 数据库管理系统的事务原理(上)
- matlab张量工具初步
- 【C语言简单说】十四:for循环
- 多目标跟踪(MOT)最新综述,一文快速入门
- Ceilometer - Install the API behind mod_wsgi
- 2021-07-31mysql连接 基本语句
- 研究了一下WORD的斜体,角度约20度
- 回弹强度记录表填写_混凝土回弹强度记录表格
- GitHub中文项目排行榜
- android espresso web,Espresso Web
- Git使用简介一(入门级)
- Eltra EL40A1024Z5/28P6X6PR2.004C
- MAC 安装tomcat
- java多线程电梯调度_面向对象之多线程(可捎带电梯调度)
- 如何使用CSS画一个圆圈?圆圈中间写字?
热门文章
- 创建跨账户IAM角色访问(Creating Cross-Account IAM Roles)
- 【电路设计】基于变压器的DC/DC变换电路(含Multisim仿真)
- SVG奥林匹克五环动画
- element框架el-aside高度100%显示
- Linux下empress数据库,Linux命令compress使用“Lempress-Ziv”编码压缩数据文件
- Node之Express服务器启动安装与配置
- python网球比赛模拟主持稿_模拟讲课大赛主持人稿
- Jlink在ADS下的配置说明及常见问题解决办法
- 河南大学计算机类保研率,郑州大学、河南大学、河南农业大学2021届保研率
- 硅谷最有权势的人:孙正义和他的愿景帝国