<!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. [No000015D]【李笑来 笔记整理】个人商业模式升级

    提前知道地图对你到达目标是至关重要的. 比较女性与男性的成本:女性的成本更高(周期性激素分泌波动),所以不要再这个时候和女朋友较劲,她也是身不由己,当你知道这件事情之后,你就会试着去理解她. 下面这张 ...

  2. hdu6435 Problem J. CSGO标程讲解以及改正标程的一个错误（本来第一个样例过不了2333） 以及 poj2926 五维曼哈顿距离模板

    比赛的时候抄poj2926的模板,但改不来啊orz #include <iostream> #include <cstdio> #include <cstring> ...

  3. typedef define typedef可以使程序参数化，提高程序的可移植性。

    小结: 1. typedef并没有创建一个新类型,它只是为某个已存在的类型增加了一个新的名称而已: 2. typedef声明也没有证据新的语义:通过这种方式声明的变量与通过普通方式声明的变量具有完全相 ...

  4. Uniform Resource Name Server

    HTTP The Definitive Guide 按址标识 identify by address 按名标识 identify by name Domain Name Server Uniform ...

  5. 《HTTP - 状态码》

    推荐一首歌 - 那吾克热<儿子娃娃> 非常喜欢前奏 1:状态码的作用? - 职责是当客户端发起请求时候,描述请求返回结果.根据状态码,客户端可以知道服务端是正确处理了请求,还是返回了错误. ...

  6. redis哨兵模式，数据尽量少的丢失

    min-slave-to-write 1 ->至少要有1个从节点 min-slaves-max-lag 10   ->超过10秒如果数据不能同步则拒绝新的写请求

  7. Java设计模式之模板模式及使用场景

    模板模式,顾名思义,就是通过模板拓印的方式. 定义模板,就是定义框架.结构.原型.定义一个我们共同遵守的约定. 定义了模板,我们的剩余工作就是对其进行充实.丰润,完善它的不足之处. 定义模板采用抽象类 ...

  8. sql生成数据库的序列号

    -- ============================================= -- Author: <Author,yaoyao,Name> -- Create dat ...

  9. 7-通用GPIO

    7-通用GPIO 1.I/O 端口控制寄存器 每个 GPIO 有 4 个 32 位存储器映射的控制寄存器(GPIOx_MODER.GPIOx_OTYPER.GPIOx_OSPEEDR.GPIOx_PU ...

  10. 数据库 - Navicat与pymysql模块

    一.Nabicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时, 可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 官网下载:htt ...