移动端rem使用
let $html=document.documentElement,
windowW = window.innerWidth,
ratio = windowW / 750
if (windowW > 750) {
$html.style.fontSize='100px'
} else {
$html.style.fontSize=100 * ratio + "px"
} 常规的移动端ui出图都是以iphone6的尺寸来设计,上面设置好根字体后直接就可以拿设计稿上的尺寸用了。
比如:25px就写0.25rem即可,不同尺寸的移动设备就会自动匹配啦!
移动端rem使用的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 移动端rem布局实践
一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...
随机推荐
- git远程仓库之从远程库克隆
上次我们讲了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫gitskill ...
- OC和JS的交互
1.引入类拓展UIWebView+TS_JavaScriptContext, 这个类拓展是能在JSCotext出现的时候就可以拿到. 因为一般情况下JSCotext在webViewDidFinishL ...
- txt文件怎么设置默认打开是用这个EditPlus软件打开
1.如果是正常安装的Editplus,只需要右击“txt文件”,在“打开方式”中选择“打开程序”,再点击“浏览”,找到“Editplus”打开,再将“始终使用选择的程序打开这种文件”前面的“口”选中, ...
- NYOJ 128 前缀表达式的计算
前缀式计算 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 先说明一下什么是中缀式: 如2+(3+4)*5这种我们最常见的式子就是中缀式. 而把中缀式按运算顺序加上括 ...
- mycat学习心得
最近老大要求我们学习mycat,并运用到实际项目中.现在简单分享下自己的学习心得,也算是只是积累吧. 什么是mycat? 用我的话理解就是:mycat是一种技术,采用mycat后可以提高程序的速度,也 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- python超简单的web服务器
今天无意google时看见,心里突然想说,python做web服务器,用不用这么简单啊,看来是我大惊小怪了. web1.py 1 2 3 #!/usr/bin/python import Simp ...
- eclipse中配置spring环境
初识Spring框架 1.简单使用 eclipse中配置Spring环境,如果是初学的话,只需要在eclipse中引入几个jar包就可以用了, 在普通java project项目目录下,建一个lib文 ...
- Linux 日常使用小记
一.Oracle VirtualBox安装Linux7.0全屏设置 1. 点击菜单栏 设备 –> 分配光驱 –> 选择一个虚拟光盘,找到VirtualBox安装目录下的VBoxGuestA ...
- 关于<form:select>
今天写基于SSM框架的程序,用到了<form:select>.由于一开始遇到了问题,所以在这里加以记录,供以后查看. 直接看jsp页面的代码 <%@ page language=&q ...