<!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. POJ 2449 - Remmarguts' Date - [第k短路模板题][优先队列BFS]

    题目链接:http://poj.org/problem?id=2449 Time Limit: 4000MS Memory Limit: 65536K Description "Good m ...

  2. iOS ARC编译器规则和内存管理规则

    iOS 开发当中,自动引用计数已经是标准的内存管理方案.除了一些老旧的项目或者库已经没有人使用手动来管理内存了吧. ARC无疑是把开发者从繁琐的保留/释放引用对象逻辑中解脱出来.但这并不是万事大吉了, ...

  3. python-爬虫：取qq号中各分组成员信息存入数据库，并将qq头像下载保存到文件夹，图片命名为qq号（实例3）

    import requestsimport pymongoimport requestsimport os class QqGroup:#三个接口url 获取 qq组号 获取每组成员信息 获取qq头像 ...

  4. Haproxy的三种保持客户端会话保持方式

    2017-03-25 15:41:41   haproxy 三种保持客户端Seesion; 一.源地址hash(用户IP识别) haroxy 将用户IP经过hash计算后 指定到固定的真实服务器上(类 ...

  5. [hardware][intel] intel全系列网卡调研

    除了公司用,我自己还要买一块家用. 但是在这一切开始之前,还需要搞清楚PCIE到底咋回事. 一, 总线 https://zh.wikipedia.org/wiki/%E6%80%BB%E7%BA%BF ...

  6. 部署WEB项目到服务器（一）安装java到linux服务器（Ubuntu）详解

    突发奇想,想在自己电脑上部署一个web网站. 1,首先要下载一个适合已经安装的linux系统的java版本. 登录网址:http://www.oracle.com/technetwork/java/j ...

  7. iOS更换科大讯飞的key

    我这个APP使用了科大讯飞的"语音评测"功能,之前使用的是我自己注册的科大讯飞账号,在这个账号里面创建的APP,生成的key. 我们公司有公司的key, 同事说可以多个APP公用一 ...

  8. java kafka 生产者消费者demo

    一.修改kafka   server.porperties的ip是你本机的ip listeners=PLAINTEXT://192.168.111.130:9092 二.生产者的例子 import o ...

  9. CentOS 7 下安装jdk1.8（转）

    原文:https://blog.argcv.com/articles/3155.c CentOS 7下目前默认是jdk1.6和1.7.若需要更高版本的1.8,我们就需要一点额外的手段了. 首先,我们需 ...

  10. 文件批量scp分发脚本

    #!/bin/bash SERVERS="172.17.xx.y 172.17.pp.mm" PASSWORD=机器登录密码 auto_ssh_copy_file() { expe ...