一、最好用没有之一

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. xml 表格

    设置单元格样式 <Style ss:ID="唯一id字符" ss:Name="单元格样式"> [内部通常用来设置 Alignment对齐.Font字 ...

  2. Vue 实例之事件 操作样式 （文本、事件、属性、表单、条件）指令

    Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...

  3. 从入门到自闭之Python集合，深浅拷贝（大坑）

    小数据池 int: -5~256 str: 字母,数字长度任意符合驻留机制 字符串进行乘法时总长度不能超过20 特殊符号进行乘法时只能乘以0 代码块: 一个py文件,一个函数,一个模块,终端中的每一行 ...

  4. WAMPSERVER-服务器离线无法切换到在线状态问题的解决

     问题描述:WAMPSERVER-服务器离线“切换到在线状态”则弹出: 解决方案: 本地连接---属性----Internet 协议(TCP/IP)---高级---wins----导入LMHOSTS( ...

  5. Bootstrap3基础教程 01 概述

    移动设备优先是 Bootstrap 3 的最显著的变化. 基础的页面: <!DOCTYPE html> <html> <head> <meta charset ...

  6. JS基础_打印出1-100之间所有的质数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C# 基础 字符串 集合 文件操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. LSPro建立PXE环境

    一.安装和配置tftp服务 1.安装tftp-hpa ipkg install tftp-hpa       tftp-hpa主要的配置文件有两个: /opt/etc/xinetd.conf /opt ...

  9. 蓝牙App漏洞系列分析之三CVE-2017-0645

    蓝牙App漏洞系列分析之三CVE-2017-0645 0x01 漏洞简介 Android 6月的安全公告,同时还修复了我们发现的一个蓝牙 App 提权中危漏洞,该漏洞允许手机本地无权限的恶意程序构造一 ...

  10. js页面重定向跳转代码总结（待续）

    情形一:东八区,浏览器中文跳转 <script type="text/javascript"> var sLang = (navigator.language ? na ...