<!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. [No000018C]Vim清除上次的搜索高亮结果-Vim使用技巧(1)

    在打开文件中使用Vim搜索功能并开启高亮显示后怎么取消当前高亮显示的目标词? 最简单的方法是再使用Vim搜索一串文档中不存在的目标词来覆盖当前高亮的搜索结果. 其实,可以在Vim尾行模式下使用 :no ...

  2. [filesystem][archlinux][disk encryption][btrfs] btrfs

    fork from here http://www.cnblogs.com/hugetong/p/6914248.html boot分区,MBR加密:https://wiki.archlinux.or ...

  3. PSU/OPATCH/OJVM下载页面及安装方式(最实用版)

    中文版:数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1) Download Reference for Or ...

  4. LeetCode 893 Groups of Special-Equivalent Strings 解题报告

    题目要求 You are given an array A of strings. Two strings S and T are special-equivalent if after any nu ...

  5. MovieLens电影数据分析

    下载数据包 链接:https://grouplens.org/datasets/movielens/1m/ 解压: 四个文件分别是数据介绍,电影数据表,电影评分表,用户表 进行电影数据分析 进入ipy ...

  6. SQL常用语法大全

    一. Table 增加列 1.增加列:alter table tableName add columnName varchar(30) 1.2. 修改列类型:alter table tableName ...

  7. vuex是什么？怎么使用？哪种功能场景使用它？

    vuex是vue框架中状态管理.在main.js引入store,注入.新建了一个目录store,...export.应用场景有:单页应用中,组件之间的状态.应用实例:音乐播放.登录状态.加入购物车等等

  8. 兼容ie10及以上css3加载进度动画

      html <div class="spinner">   <div class="rect1"></div>   < ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  10. Python3学习之路~6.4 析构函数

    析构函数是在实例释放.销毁的时候执行的,通常用于做一些收尾工作.比如说,关闭一些数据库连接.打开的临时文件等. #Author:Zheng Na class Role: # 构造函数 def __in ...