Rem实现移动端适配
移动端适配
- web页面跑在手机端(h5页面)
- 跨平台
- 基于webview()
- 基于webkit
常见适配方法
pc端采用display:inline-block,让div盒子横着排
移动web:采用定高,宽度百分比,flex弹性布局,meDIA QUERY 媒体查询;
媒体查询
结合css,通过媒体类型(screen、print)和媒体参数(max-width)@media screen and (max-width: 320px){
/* css在屏幕跨度<=320px时这段样式生效 */
.inner{
float: left;
}
}
@media screen and (min-width: 321px){
.inner{//
}
}
以上实现了一个简单的横排和竖排的响应
rem原理与简介
Rem就是一个字体单位,类似于px,
区别:他会根据HTML根元素大小而定,同时也可以作为高度和宽度的单位。
适配原理:动态修改html的font-size适配;rem是通过不同屏幕的大小设置html根元素的font-size的属性大小来实现适配。/* +_media实现*/
@media screen and (max-width: 360px) and (min-width: 321px){
html{
font-size: 20px;
}
}
@media screen and (max-width: 320px){
html{
font-size: 24px;
}
}
通过JS动态设置font-size:
//获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth/10 + 'px';
rem进阶
rem基准值计算
1rem = 16px
rem数值计算与构建
170/16 = 170px
rem与scss结合使用(node-sass安装)
也可以直接安装sass(安装教程http://www.cnblogs.com/yehui-mmd/p/8035170.html)rem适配实战
通过监听浏览器视口来进行适配let htmlDom = document.getElementsByTagName('html')[0];
window.addEventListener('resize', (e)=>{
//获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
htmlDom.style.fontSize = htmlWidth/10 + 'px';
})
定义rem适配的函数及使用(sass语法)
@function px2rem($px) {
$rem:37.5px;//iphone6
@return ($px / $rem) + rem;
}
.header{
width:100%;
height: px2rem(40px);
background-color: red;
padding-left: px2rem(23px);
}
Rem实现移动端适配的更多相关文章
- JS+rem,移动端适配
window.onresize = function () { setHtmlFz(); } setHtmlFz(); function setHtmlFz() { // 基础值 var baseVa ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
- rem简单实现移动端适配
rem:移动web开发 默认字体大小是16px 在<html>中设置字体大小 与em的区别: em是在父级设置字体大小受影响 移动端适配 首先获取屏幕的宽度 计算当前屏幕宽度和640的比例 ...
- 移动端适配(rem & viewport)--移动端开发整理笔记(四)
移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸 我们知道,在不同的手机设备,分辨率大小是 ...
- 移动端适配 后篇(rem+vm)
涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...
- 移动端适配 rem
前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...
随机推荐
- 关于LDA的gibbs采样,为什么可以获得正确的样本?
算法里面是随机初始了一个分布,然后进行采样,然后根据每次采样的结果去更新分布,之后接着采样直到收敛. 1.首先明确一下MCMC方法. 当我们面对一个未知或者复杂的分布时,我们经常使用MCMC方法来进行 ...
- 如何确定LDA的主题个数
本文参考自:https://www.zhihu.com/question/32286630 LDA中topic个数的确定是一个困难的问题. 当各个topic之间的相似度的最小的时候,就可以算是找到了合 ...
- Angular 笔记系列(一)项目组织与命名规范
其实使用 Angular.js 做项目已经很久了,也遇到过许多问题.其中很多问题的出现都是因为没有按照规范或者最佳实践来做,大部分原因是学的不够细,很多 tips 没 get 到,用到项目中就会出现各 ...
- ansible一些基本操作
一.介绍 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in any languag ...
- Linux查看系统与内核信息(uname、file和lsb_release -a)
uname 命令 uname 命令可以用来查看系统与内核的相关信息,命令格式如下: [root@localhost ~]# uname [选项] 选项: -a:查看系统所有相关信息: -r:查看内核版 ...
- Python面试题之Python中__repr__和__str__区别
看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): self.data = value >> ...
- 20145328 《Java程序设计》第10周学习总结
20145328 <Java程序设计>第10周学习总结 资料学习内容总结 网络编程 13.1 网络概述 网络编程技术是当前一种主流的编程技术,随着联网趋势的逐步增强以及网络应用程序的大量出 ...
- 20145231熊梓宏 《网络对抗》 实验8 Web基础
20145231熊梓宏 <网络对抗> 实验8 Web基础 基础问题回答 ●什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采集 ...
- Exynos4412 IIC总线驱动开发(一)—— IIC 基础概念及驱动架构分析
关于Exynos4412 IIC 裸机开发请看 :Exynos4412 裸机开发 —— IIC总线 ,下面回顾下 IIC 基础概念 一.IIC 基础概念 IIC(Inter-Integrated Ci ...
- mysql字符串分割操作
SELECT '1,2,3,4,5,6,7,8' FROM dual; -- 列转行分割 ),) FROM () a JOIN mysql.help_topic b ); -- 测试 ),) as p ...