rem适配

<meta name="viewport"  content="width=device-width,user-scalable=no"/>

<script>

  (function(){

    var html=document.documentElement;

    var hWidth=html.getBoundingClientRect().width;

    html.style.fontSize=hWidth/16+"px";  //除的这个数是可以随便的,好算就行,若是除以16(除多少都行),意味着16rem占满整行,拿到设计图的话,量出来的设计图尺寸/2/html.style.fontSize就能适配

  })()  

</script>

移动端适配(3)——rem适配的更多相关文章

  1. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  2. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  3. 移动端适配(rem & viewport)--移动端开发整理笔记(四)

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

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

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

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

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

  6. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  7. H5移动端rem适配

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

  8. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  9. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  10. 移动端rem适配屏幕

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

随机推荐

  1. TCP的成块数据流

    TCP使用滑动窗口协议的另一种方式来实现流量控制.该协议允许发送方在停止并等待确认之前可以连续发送多个分组.由于发送方不必每发送一个分组就停下来等确认,因此该协议可以加速数据的传输. 一.滑动窗口  ...

  2. python 简单爬虫(beatifulsoup)

    ---恢复内容开始--- python爬虫学习从0开始 第一次学习了python语法,迫不及待的来开始python的项目.首先接触了爬虫,是一个简单爬虫.个人感觉python非常简洁,相比起java或 ...

  3. pop控制器

    1.寻找指定的控制器MineViewControllerclass UIViewController *mineVC = nil; for (UIViewController * controller ...

  4. 【Template】Miller Rabin

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...

  5. ACM-素数专题(持续更新)

    埃拉托斯特尼筛法,或者叫埃氏筛法(听上去似乎很高大上的样子) #include<bits/stdc++.h> using namespace std; typedef long long ...

  6. odoo 的一些orm 操作

    1.基础文件及目录结构 在认识odoo ORM框架前,先介绍一下odoo中模块目录结构.     data:存放模块预制数据 i18n:存放国际化文件 models:存放模型等py代码 securit ...

  7. 获取浏览器用户代理(user-agent)

    获取浏览器用户代理(user-agent) 用户代理(user-agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助网站识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数 ...

  8. html5在手机熄屏后倒计时会出现延迟情况

    今天开发了一个手机端的倒计时,然后同事说出现了Bug,怎么回事呢?Bug很简单,就是在手机返回主界面或者熄屏后倒计时会暂停在熄屏前的时间(注意时间是页面加载时获取的服务器的时间),问题很简单,知道问题 ...

  9. 3dsmax2018卸载/安装失败/如何彻底卸载清除干净3dsmax2018注册表和文件的方法

    3dsmax2018提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2018失败提示3dsmax2018安装未完成,某些产品无法安装,也有时候想重新 ...

  10. typescript -- ts

    算是强类型语言,javascrpt是弱类型语言,是指对数据的类型的处理,弱类型语言的特点有时候只是在支行的时候才告诉你出错了,但写的时候你是查觉不到的 ts也是以es5-7为语法标准的,开发的算是另外 ...