一、最好用没有之一

http://www.jianshu.com/p/b00cd3506782

虽然博主说这个方案已经过期了 但是新方案还没有理解 就接着沿用这个

可以根据自己常用的设计稿的宽度修改 640 为 750

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

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

<script>

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

</script>

 /*你引进的资源*/

<title>标题</title>

</head>

<body>

 /*你的代码*/

</body>

</html>

作者：_minooo_

链接：http://www.jianshu.com/p/b00cd3506782

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

二、高清方案

高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**。

此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。

注意：

  • rem适合写固定尺寸。其余的根据需要换成flex或者百分比。
  • 在X5内核的浏览器下，字体会自动放大，解决方案： 
*, *:before, *:after { max-height: 100000px }
  • 如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。

　　  否则可能会有横向滚动条。

'use strict';

/**

 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;

 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;

 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;

 */

const win = window;

export default win.flex = (normal, baseFontSize, fontscale) => {

  const _baseFontSize = baseFontSize || 100;

  const _fontscale = fontscale || 1;

  const doc = win.document;

  const ua = navigator.userAgent;

  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);

  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);

  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;

  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);

  let dpr = win.devicePixelRatio || 1;

  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {

    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;

    dpr = 1;

  }

  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');

  if (!metaEl) {

    metaEl = doc.createElement('meta');

    metaEl.setAttribute('name', 'viewport');

    doc.head.appendChild(metaEl);

  }

  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;

};

作者：_minooo_

链接：http://www.jianshu.com/p/985d26b40199

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

移动端布局Rem的更多相关文章

  1. 移动端布局 - REM方式

    默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...

  2. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  3. 移动端布局 rem,和px

    1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂. // rem 布局重定义 (function(){ $('html').css('font-size ...

  4. 移动端布局-rem

    created(){ // 设置根字号 // 屏幕宽度 setHTML(); // addEventListener()不冲突 window.addEventListener('resize', se ...

  5. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  6. 移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）

    viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...

  7. Vuex里的module选项和移动端布局

    Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出

  8. 移动端布局Demo展示图文

    上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...

  9. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

随机推荐

  1. WEB小计

     使用vue的事件绑定时,应当使用.stop来阻止事件的传播   html 有捕获和冒泡两种事件机制

  2. Docker——桥接网络配置

    [root@localhost ~]# cd /etc/sysconfig/network-scripts/ [root@localhost network-scripts]# ls ifcfg-et ...

  3. mac手册汉化 2019

    1.安装依赖 brew install automake brew install opencc 2.编译 wget https://github.com/man-pages-zh/manpages- ...

  4. Hibernate 数据库方言

    1.所有关系型数据库都支持使用标准SQL语句 2.但数据库在语法细节上存在一些差异 3.Hibernate可根据方言自动应付底层数据库访问所存在的细节差异,将HQL有针对的转化为某一数据库所支持的SQ ...

  5. XVS 操作

    1. xvs安装   rpm -i  ***.rpm 2.获取license root@ubuntu:/usr/local/xvs# ./xvs -L .Host ID: 16b3d720584704 ...

  6. Guava动态调用方法

    前言 大家在Coding的时候,经常会遇到这样一个情况,根据不同的条件去执行对应的代码.我们通常的处理方式是利用if-else判断,或者直接switch-case,特别是jdk1.6之后,swith开 ...

  7. vue下载后台传过来的乱码流的解决办法

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, ...

  8. List<int>转化为逗号链接的字符串

    /// <summary> /// List<int>转化为逗号链接的字符串 /// </summary> /// <param name="lis ...

  9. websocket 多聊天室功能

    websocket 类也是在网上找到的. 修改后可以用来创建多房间聊天室.可以发送图片表情,图片,及文字. 分享的代码,已经测试.可正常运行 HTML 端代码 <!DOCTYPE html> ...

  10. KeyError: 'pass_ticket'

    使用wxpy模块对接微信登陆,在扫描程序弹出二维码后,使用手机微信扫描登陆之后报KeyError: 'pass_ticket'. 原因就是微信禁止该账号登陆微信网页版,如下图: 所以,去找到能让账号登 ...