<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{margin:0;padding:0;}

            ul{

                width:100%;

                height:1rem;

                background: red;

            }

            li{

                width:1rem;

                height:1rem;

                font-size:0.2rem;

                color:blue;

                float:left;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>小桥</li>

            <li>流水</li>

            <li>人家</li>

        </ul>

    </body>

    <script type="text/javascript">

//          移动端适配

            function rems(){

//                获取屏幕宽度(此处是一个兼容的写法)

                var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;

//                设置根元素的fontSize的大小，此处的3.2是--设计图的宽度/100

                document.documentElement.style.fontSize=htmlWidth/3.2+"px";

//                设置条件屏幕宽度最大值

                if(htmlWidth>640){

                    htmlWidth=640;

                    document.documentElement.style.fontSize=htmlWidth/3.2+"px";

                }

            }

//            默认调用适配函数

            rems();

//            window大小变化时调用适配函数

            window.onresize=function(){

                rems()

            }

    </script>

</html>

移动端的rem适配的更多相关文章

  1. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  2. 前端移动端的rem适配计算原理

    rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...

  3. Vue-cli4.xPC端项目Rem适配

    适配准备 安装 (amfe-flexible) 和(postcss-px2rem) 1, 安装依赖并在main.js中引入该依赖 npm i amfe-flexible import "am ...

  4. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  5. 自动改变html font-size，实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

  6. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  7. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  8. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  9. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

随机推荐

  1. Writable序列化

    序列化:将内存中的对象 转换成字节序列以便于存储在磁盘上或者用于网络传输. 反序列化:将磁盘或者从网络中接受到的字节序列,装换成内存中的对象. 自定义bean对象(普通java对象)要想序列化传输,必 ...

  2. [No000015B]三十分钟说清经济机器是怎样运行的

    https://v.qq.com/x/page/z01685nf12f.html

  3. hdu 6390 欧拉函数+容斥（莫比乌斯函数） GuGuFishtion

    http://acm.hdu.edu.cn/showproblem.php?pid=6390 题意:求一个式子 题解:看题解,写代码 第一行就看不出来,后面的sigma公式也不会化简.mobius也不 ...

  4. iOS-原生纯代码约束总结（一）之 AutoresizingMask

    一,概述 iOS有两大自动布局利器:autoresizing 和 autolayout(autolayout是IOS6以后新增).autoresizing是UIView的属性,一直存在,使用也比较简单 ...

  5. [administrative][archlinux][clonezilla][disk cloning] 一块 windows 10 硬盘的备份

    https://wiki.archlinux.org/index.php/disk_cloning https://wiki.archlinux.org/index.php/full_system_b ...

  6. Flink – process watermark

    WindowOperator.processElement 主要的工作,将当前的element的value加到对应的window中, windowState.setCurrentNamespace(w ...

  7. SQL GROUP BY对多个字段进行分组

    参考链接:http://stackoverflow.com/questions/2421388/using-group-by-on-multiple-columns 在平时的开发任务中我们经常会用到M ...

  8. 《mongoDB》概念-数据类型

    一:概念 - mongoDB 是一个面向文档的数据库,而不是关系型数据库. - 摘自<mongoDB 权威指南 第2版>第3页 二:数据类型 - null - 用于表示空值或者不存在的字段 ...

  9. python摸爬滚打之day01----初识Python

    1.编程语言分类 编译型语言:程序被一次性全部翻译成机器语言,计算机直接以机器语⾔言来运⾏行行此程序. 优点:运行效率高,可脱离语言环境独立运行. 缺点:开发效率低,可移植性差. 解释型语言:将程序逐 ...

  10. go get 的使用

    1.设置环境变量export GOPATH=/f/go_work2 2.go get github.com/xx