一、最好用没有之一

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. Springboot导出Excel并下载

    引入相关依赖 <!--数据导出excel--> <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> & ...

  2. Hello World！！！

    C #include <stdio.h> int main() #main 入口函数 { printf("Hello,World!"); #printf 函数打印 ; ...

  3. 嵌入式Linux的计划任务，发送请求记录

  4. 1-Perl 简介

    Perl 是 Practical Extraction and Report Language 的缩写,可翻译为 "实用报表提取语言".Perl 是高级.通用.直译式.动态的程序语 ...

  5. Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final

    其实原因很简单,就是翻译的结果 匿名内部类和局部内部类只能引用外部的fianl变量 把变量变成fianl就行了  第一次知道啊    记小本本.......

  6. 初识JavaScript对象

    JavaScript对象语法.类型.属性 属性描述符(getOwnPropertyDescriptor().defineProperty()) [[Get]].[[Put]].Getter.Sette ...

  7. 百度 Ueditor 使用及规则

    UMeditor 官网::https://ueditor.baidu.com/website/download.html#ueditor文档::http://fex.baidu.com/ueditor ...

  8. 1 SQL SERVER 实现字符串分割成table的方法

    CREATE FUNCTION [dbo].[fn_SplitStringToTable] ( @p_Input VARCHAR(MAX), @p_Delimeter CHAR() = ',' ) R ...

  9. 查看磁盘空间，Android各目录讲解

    dfFilesystem Size Used Free Blksize/dev 2.0G 116.0K 2.0G 4096----------包含了所有Linux系统中使用的外部设备/sys/fs/c ...

  10. hadoop 中ALL Applications 中Tracking 下History查找不到MapReduce Job 日志

    运行一个Map Reduce job 想查看日志: 点击History ,找不到网页 解决办法如下: 1.其中有一个进程是需要启动的: Hadoop自带了一个历史服务器,可以通过历史服务器查看已经运行 ...