目标效果：

缩小浏览器之后

在<head>最前面引入flexible.js

<head>

 。。。

<script type="text/javascript" src="./lib/flexible.js"></script>

。。

</head>
flexible.js 内容如下
(function flexible (window, document) {

    var docEl = document.documentElement

    var dpr = window.devicePixelRatio || 1

    // adjust body font size

    // console.log(dpr)

    function setBodyFontSize () {

        if (document.body) {

            document.body.style.fontSize = (12 * dpr) + 'px'

        }

        else {

            document.addEventListener('DOMContentLoaded', setBodyFontSize)

        }

    }

    setBodyFontSize();

    // set 1rem = viewWidth / 10

    function setRemUnit () {

        var rem = docEl.clientWidth / 10

        docEl.style.fontSize = rem + 'px'

    }

    setRemUnit()

    // reset rem unit on page resize

    window.addEventListener('resize', setRemUnit)

    window.addEventListener('pageshow', function (e) {

        if (e.persisted) {

            setRemUnit()

        }

    })

    // detect 0.5px supports

    if (dpr >= 2) {

        var fakeBody = document.createElement('body')

        var testElement = document.createElement('div')

        testElement.style.border = '.5px solid transparent'

        fakeBody.appendChild(testElement)

        docEl.appendChild(fakeBody)

        if (testElement.offsetHeight === 1) {

            docEl.classList.add('hairlines')

        }

        docEl.removeChild(fakeBody)

    }

}(window, document))

然后根据当前浏览器宽度: 2048px = 10rem 推导出204.8px = 1rem 。对所有标签宽高，字体用到px的地方，换算成rem即可

> screen.width

< 2048

CSS自适应布局的更多相关文章

  1. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  2. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

  3. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

  4. css 自适应布局阮一峰

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  5. css 自适应布局

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  6. 记一次产品需求：图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  7. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  8. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  9. DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

  10. css自适应布局之“圣杯双飞翼”

    首先,这个这么扯淡又装逼的名字不知道是谁起的,大意就是说:中间的内容随着浏览器宽度的不同,进行宽度自适应操作,而两边的内容固定宽度. 来,上个代码演示一下: <style> *{ marg ...

随机推荐

  1. 关于confusion_matrix()返回的矩阵的索引顺序（类别顺序）

    转载至:https://blog.csdn.net/m0_38061927/article/details/77198990 1.混淆矩阵 混淆矩阵是机器学习中总结分类模型预测结果的情形分析表,以矩阵 ...

  2. 爬虫五之Selenium

    Selenium 自动化测试工具,支持多种浏览器: 爬虫中主要用来解决JavaScript渲染问题. 用法详解 基本使用 声明浏览器对象 from selenium import webdriver ...

  3. 【VS开发】ActiveX开发注意事项

    [VS开发]ActiveX开发注意事项 标签:[VS开发] 注意:必须在工程的app文件的InitInstance()中加入如下代码,否则动态创建控件不会成功: AfxEnableControlCon ...

  4. vue ----》实现打印功能

    1.安装打印相关依赖 cnpm install vue-print-nb --save 2.安装后,在main.js文件中引入 import Print from 'vue-print-nb' Vue ...

  5. 在kali2.0中使用msf图形界面可能会遇到的问题

    kali版本:Linux kali 4.9.0-kali3-amd64 #1 SMP Debian 4.9.18-1kali1 (2017-04-04) x86_64 GNU/Linux 编写日期:2 ...

  6. Elasticsearch-数据的存储、搜索（干货）

    ES-深入功能ES中数据是如何组织的?逻辑设计:用于索引和搜索的基本单位是文档,可以将其认为是关系数据库里的一行.文档以类型来分组,类型包含若干文档,类似表格包含若干行.最终,一个或多个类型存在于同一 ...

  7. 小记---------maxwell 一个可以实时读取mysql二进制日志binlog，并生成JSON格式的消息，作为生产者发送给kafka，Redis，文件或其他平台的应用程序

    maxwell主要提供了下列功能     支持 SELECT * FROM table 的方式进行全量数据初始化     支持在主库发生failover后,自动回复binlog位置(GTID)     ...

  8. python基础之迭代器生成装饰器

    基本概念 1.容器(container) 容器是一种把多个元素组织在一起的数据结构,容器中的元素可以逐个地迭代获取,可以用in, not in关键字判断元素是否包含在容器中.通常这类数据结构把所有的元 ...

  9. ds replicas是什么

    以上是我百度的答案.很显然,这个对于初学者很不友好,中文的每一个靠谱的,英文的都TM是how 和 why .But 我要 what! 所以只能自己搞,自己琢磨,搞完分享出来,助力后来者不掉坑,有所查. ...

  10. 如何在一个线程环境中使用一个线程非安全的java类

    在开发过程中 当我们拿到一个线程非安全的java类的时候,我们可以额外创建这个类的管理类 并在管理类中控制同步 比如 一个非线程安全的Pair类 package test.thread.sx.test ...