移动端开发rem单位
1、用js计算
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
2、媒体查询 “@media”
@media only screen and (max-width: 320px){html{font-size: 9px;} }
@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }
@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }
@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }
@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }
@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }
@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }
@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }
@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }
@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }
@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }
@media only screen and (min-width: 640px){html{font-size: 20px;} }
移动端开发rem单位的更多相关文章
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- 移动端开发--rem和像素如何使用!
刚开始做移动端的开发的时候,大多时候是在使用 像素(PX)来写页面和布局的,但是使用下来,还是有多少不好用! 随之就开始用 rem 来写,rem写的结果是页面放到一些屏幕上,字体过小,如果页面渲染用了 ...
- 移动端开发 rem 案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- WebApp开发之--"rem"单位(转)
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- 移动端开发,几个你可能不知道的CSS单位属性。
1. rem "em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小:“rem” 中的 “r” 代表 “root”,它表示以根(即“h ...
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- 移动端开发注意事项——meta、rem以及弹性盒
移动端开发注意事项——meta.rem以及弹性盒 随着人们对移动端的依赖程度的增强,前端开发对移动端的需求也越来越强烈.那么,在移动端开发中,有哪些事项是需要注意的呢? meta标签 在常规的pc端开 ...
- rem值计算------移动端开发计算方式
移动端开发: <meta name="viewport" content="width=device-width, initial-scale=1, maximum ...
- 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...
随机推荐
- 『TensorFlow』SSD源码学习_其三:锚框生成
Fork版本项目地址:SSD 上一节中我们定义了vgg_300的网络结构,实际使用中还需要匹配SSD另一关键组件:被选取特征层的搜索网格.在项目中,vgg_300网络和网格生成都被统一进一个class ...
- 我的第一个C语言程序
从自学开始到现在应该有块一个月了,之前一直想要写博客一直没想好要自己建博客还是找平台来写.现在想想 其实都一样,不论在哪里,都可以记录自己学习的成长记录.这是我的第一篇关于C语言学习的博客,希望这只是 ...
- svn中的ignore
首先,svn GUI菜单右键的ignore功能,写的模模糊糊,网上也没啥人给出清晰的解释,stackoverflow推荐用命令行控制 SVN有3中方法配置ignore 1.配置文件 C:\Users\ ...
- 使用Spring-data-jpa(2)(三十一)
创建实体 创建一个User实体,包含id(主键).name(姓名).age(年龄)属性,通过ORM框架其会被映射到数据库表中,由于配置了hibernate.hbm2ddl.auto,在应用启动的时候框 ...
- java基础语法运算符
1.1 算数运算符++.--的使用 在一般情况下,算数运算符不会改变参与计算的变量值.而是在原有变量值不变的情况下,计算出新的值.但是有些操作符会改变参与计算的变量的值, ...
- pycharm开发工具,使用
在pycharm中,打的断点,仅在调试模式下,即debug 模式下,才有效 Use Alt + Shift + C to quickly review your recent changes to t ...
- EtherCAT(扒自百度百科)
EtherCAT(以太网控制自动化技术)是一个开放架构,以以太网为基础的现场总线系统,其名称的CAT为控制自动化技术(Control Automation Technology)字首的缩写.Ether ...
- Java单例模式《一》饿汉式
package com.study.mode; /** * 单例模式:饿汉式. 线程安全. * @ClassName: SingleBean * @author BlueLake * @date 20 ...
- Saiku二次开发获取源代码在本地编译(五)
关于Saiku的二次开发,在本地编译然后启动自己编译好的Saiku服务 Saiku是开源的,从github上能下载源代码,本例中的saiku源码也是从github上找的,然后自己改了一些pom.xml ...
- PHP多进程处理并行处理任务实例
本文目的 本文通过例子讲解linux环境下,使用php进行并发任务处理,以及如何通过pipe用于进程间的数据同步.写得比较简单,作为备忘录. PHP多进程 通过pcntl_XXX系列函数使用多进程功能 ...