rem 、em
介绍:rem是相对字体单位;根据html根元素大小而定,同样可作为宽高等单位;
适配原理:将px替换成rem,采用rem适配移动web的原理,根据不同屏幕宽度设置html的font-size的大小;
计算公式:1rem=html的font-size(浏览器默认font-sizt:16px);
动态修改font-size方法:
1.@media查询
@media screen and(max-width:300px) and(min-width:200px){
html{
font-sizt:20px;
}
}
这种方式比较麻烦,因为移动端需要是配的手机型号太多;
2、js设置font-size
获取视窗: let win_width=document.documentElement.clientWidth || document.body.clientWidth;
获取html: let htmlDom=document.getElementsByTag("html")[0];
设置属性: htmlDom.style.fontSize=win_width/10+"px";
em
是相对长度单位。相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
em单位有如下特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,
rem 、em的更多相关文章
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- 浅谈rem、em、px
1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- rem、em、px的区别
px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- [转]响应式网页设计:rem、em设置网页字体大小自适应
本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...
- rem、em、px、pt及网站字体大小设配
rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...
- 响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
- rem、em 、font-size随着屏幕大小的改变而改变
rem 的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...
随机推荐
- 15.Linux的文件结构
linux的文件结构和windows不同,没有分区,是树形的结构: /etc:存放配置文件 /lib:编译程序需要的函数库 /usr:包含所有其他内容,比如内核在/usr/src中,/usr/bin存 ...
- 获取sqlserver数据字典的完整sql。
SELECTsysobjects.name AS 表名称 , --------------as 的作用:为字段起一个别名 --sysproperties.[value] AS 表说明 , ------ ...
- 数据库自动备份压缩脚本(备份最近七天,七天之前自动删除,只保留rar文件)
把下面脚本添加到服务器计划任务中去,设置为每天执行即可,文件备份路径即为脚本所在路径,必须安装压缩文件 @echo offrem 计算指定天数之前的日期,用于后面删除指定天数的数据set DaysAg ...
- 页面定制CSS代码初探(六):h2、h3 标题自动生成序号 详细探索过程
前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...
- day06-2 基本运算符(解压缩)
目录 运算符 算数运算符 比较运算符 赋值运算符 逻辑运算符 运算规则 成员运算符 身份运算符 Python运算符优先级 链式赋值(必考) 交叉赋值(必考) 解压缩(必考) 运算符 算数运算符 进行算 ...
- node——try-catch与异步操作
//try-catch,用于捕获异常 //try-catch在node中只能捕获同步的异常,不能捕获异步异常 var fs=require('fs'); /*fs.writeFile('./abc.t ...
- vue登录
<template> <section class="wrap-page wrap-page-u" style="padding-top:2rem;&q ...
- sqrt开平方算法的尝试,是的看了卡马克大叔的代码,我来试试用C#写个0x5f3759df和0x5f375a86跟System.Math.Sqrt到底哪个更强
今天笔试遇到一个代码题,要求写一个开平方算法,回来发现了雷神之锤里的一段神代码: float Q_rsqrt( float number ) { long i; float x2, y; const ...
- 【【henuacm2016级暑期训练】动态规划专题 M】Little Pony and Harmony Chest
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每一位显然只要取1..60这些数字. 然后需要保证每个这些数字里面,每个数字所用到的质因子都它所唯一拥有的.别人不能用 因为如果别人 ...
- 使用BabeLua在cocos2d-x中编辑和调试Lua
使用BabeLua在cocos2d-x中编辑和调试Lua BabeLua是一款基于VS2012/2013的Lua集成开发环境,具有Lua语法高亮,语法检查.自己主动补全.高速搜索,注入宿主程序内对Lu ...