一、最好用没有之一

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. leecode 刷题（32）-- 链表的中间节点

    leecode 刷题(32)-- 链表的中间节点 描述: 给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3, ...

  2. JavaScript设计模式（装饰者模式）

    一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...

  3. unity ugui image更换图片

    1:利用资源加载方式 using UnityEngine; using System.Collections; using UnityEngine.UI; public class ChangeIma ...

  4. JS基础_while的练习2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. Java学习 面向对象（下）——Java疯狂讲义th4

    面向对象(下) [TOC] 包装类 通过包装类可以把8个基本类型的值包装成对象使用. 自动拆箱.自动装箱 把字符串类型值转换成基本类型的值: 包装类的 parseXxx(String s)静态方法 包 ...

  6. vue进阶：vs code添加vue代码片段

    如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...

  7. 文档.Write（）和文档.Writeln（）石材

    文档.Write()和文档.Writeln()文档是Javascript对象,其中封装了许多有用的方法,其中Write()和Writeln()是直接从浏览器窗口输出文本信息的方法.文件.Write() ...

  8. MySQL数据库笔记一：简介及简单操作

    一.初识MySQL数据库 1.数据库的概述 <1>数据库:Database 长期存储在计算机内的,有组织的,可共享的数据集合. 存储数据的仓库.(文件) <2>数据库管理系统: ...

  9. JavaScript事件的基本学习

  10. Delphi 音频播放

    樊伟胜