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);

还有弹性布局flex、百分比布局

百分比布局:

html {
font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
} }
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}

 rem布局bug-页面短暂闪烁或界面由小变大:

将body设置属性 style="visibility:hidden",待页面加载完后,设置属性 visibility:visible

2、手淘flexible页面适配

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

flexible是一个制作H5适配的开源库,需要在html中引入,可以直接使用阿里CDN:

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

CSS处理器(SASS)

@function px2rem($px, $base-font-size: 75px) {
@return ($px / $base-font-size) * 1rem;
}

参数$base-font-size: 75px,可以通过(psd文件的宽度/10)来计算。假如psd宽750,则$base-font-size为75px

//比如量取box宽为190,高为190,则代码:
.box {
width: px2rem(190px);
height: px2rem(190px);
}

手机端页面自适应解决方案-rem布局的更多相关文章

  1. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  2. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  3. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  4. 手机端页面自适应解决方案—rem布局(该方案目前已过时)

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  5. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  6. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  7. 手机端页面自适应:rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  8. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  9. 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

随机推荐

  1. Beta版本冲刺———第一天

    会议照片: 项目燃尽图: 1.项目进展: 昨天的困难:对2048项目中方块颜色的调整 今天解决的进度:调整了方块的颜色,原来用UIColor.(颜色名)color颜色效果不是很好,现在改用了RGB调色 ...

  2. jquery 获取json文件数据,显示到jsp页面上, 或者html页面上

    [{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...

  3. Linux TOP命令详解

    先来看一下执行以后的结果: 各项数值的含义如下: 第一行是任务队列信息. :: 当前时间 up days,: 系统运行时间,格式为天,时:分 user 当前登录用户数 load average: 0. ...

  4. swift 闭包简写实际参数名$0、$1等理解

    Swift 自动对行内闭包提供简写实际参数名,你也可以通过 $0 , $1 , $2 等名字来引用闭包的实际参数值. 如果你在闭包表达式中使用这些简写实际参数名,那么你可以在闭包的实际参数列表中忽略对 ...

  5. 我们一起学Windows Phone 8-01-开发环境搭建

    我们仅讨论Windows Phone 8的开发,不考虑兼容向下兼容.也不会提供任何盗版软件的下载.破解. 需要准备 知识:.NET相关开发经验,C#语言开发经验.如果有WPF或Silverlight开 ...

  6. 关于Bufferedreader的功能扩写

    package cn.hncu.pattern.decorator.v1; import java.io.FileReader;import java.io.IOException; public c ...

  7. Mysql(六):数据备份、pymysql模块

    一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具 下载链接:https://pan.baidu.com/s/1bpo5mqj 掌握: #1. 测试+链接 ...

  8. IIS+NGINX 负载web服务器

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...

  9. python中安装并使用redis

    数据缓存系统:1:mongodb:是直接持久化,直接存储于硬盘的缓存系统2:redis: 半持久化,存储于内存和硬盘3:memcache:数据只能存储在内存里的缓存系统 redis是一个key-val ...

  10. 20181013xlVba年级成绩报表

    Public Sub 高一成绩报表() Application.ScreenUpdating = False Application.DisplayAlerts = False Application ...