html中的rem做响应式,使用rem制作响应式网站
1.rem可以适配不同分辨率
具体来说,有的屏幕640px宽。有的750px宽,有的甚至更大或者更小,如果是用固定的px单位,要么导致大的放不下,或者是小的很难看。
如果元素大小固定占屏幕的百分之X就可以解决问题了。
比如640px的10%是64px,750px的10%是75px。
如果10个10%宽度的元素放在一起,就会正好铺满整个屏幕,不会超出也不会留白。
简单理解
rem就是指屏幕宽度的百分之X
或者说,n个rem = 用户可视区域100%宽度
注意:之所以不说高度,是因为高度(屏幕纵向)方向的内容可以通过滚动屏幕来查看。
文字实例理解
1.设计师给定了一个640px宽度的设计图。
2.假定64rem = 100%宽度(这里是640px),那么1rem = 10px。
3.按照这种比例写出了静态页面,将设计图上的元素大小,全部用rem写下。
4.可以看到静态页面在640px宽度的页面上显示正常。
5.某用户使用的是320宽度的手机,因为你假设的64rem = 100%宽度,因此此时1rem = 5px(320 / 64 = 5),因此也完美的显示。
2.rem的使用方法
1.rem是css单位;
2.1rem的大小是通过html下的font-size这个css属性告诉浏览器的;
3.使用rem替换px所在的位置即可。
假设预设的1rem = 10px,然后一个元素(class = ‘ele’)的宽度是20px,高度是30px,那么css写成下面的格式:
html{
font-size: 10px;
}
.ele{
width: 2rem;
height: 3rem;
}
3.应用到各种分辨率下
发现问题了吗?由于屏幕分辨率各不一样,因此我们没有办法确定1rem等于多少px。
原因是rem是css中使用的单位,css是不会帮忙计算1rem等于多少px,只能通过自己来计算。
计算方式很简单:
1.设计稿A(假定是640px),有一个预设的rem和px的比例B(假如是1rem = 10px)
2.获取用户浏览器的可是区域的宽度C(假如是320px),那么此时1rem的尺寸D可以根据B/A = D/C这个公式计算出来
3.原因是假定的屏幕可以容纳多少个rem,这是一个固定的比例(如这里就是64rem)
1rem = B / A * C;
//代入可得
1rem = 10px / 640px * 320px = 5px;
4.其他
1.页面加载前就得设置好1rem的尺寸(记得是设置在html元素下的font-size);
2.加载完成后,用户的页面尺寸可能会改变(这种情况往往是出现在PC端,我们需要重新设置1rem等于多少px)
整体的代码如下,直接复制使用,放到页面的head里面。
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//这里是假设在1920px宽度设计稿的情况下,1rem = 100px;
// 可以根据实际需要修改
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
};
fun(document, window);
rem的上段写法多种多样,原理万变不离其宗,在贴出一种笔者使用过的方法,个人习惯讲1rem设置成100px。由于PC端和移动端往往是两套UI,故通过判断屏幕大小区分PC端和移动端,进而计算出1rem等于多少px,这里使用的是$(window).width()判断的,也可以使用if ( window.innerWidth>1080) 来判断:
$(window).resize(function ()// 绑定到窗口的这个事件中
{
if($(window).width() >= 1000){
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}else{
let designSize = 750; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
});
$(window).ready(function ()// 绑定到窗口的这个事件中
{
if($(window).width() >= 1000){
$('.container').show().prev().hide();
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}else{
let designSize = 750; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
});
html中的rem做响应式,使用rem制作响应式网站相关推荐
- 响应式网页设计_响应式网页设计中的常用技术
响应式网页设计 在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
- 在有赞做java有发展吗_响应式架构与 RxJava 在有赞零售的实践
随着有赞零售业务的快速发展,系统和业务复杂度也在不断提升.如何解决系统服务化后,多个系统之间的耦合,提升业务的响应时间与吞吐量,有效保证系统的健壮性和稳定性,是我们面临的主要问题.结合目前技术体系和业 ...
- html 响应式布局注意问题,响应式布局总结(推荐)
响应式布局的开发基础知识 本章主要分为以下几个部分 •正确理解响应式设计 •响应式设计的步骤 •响应式设计需要注意的问题 •响应式网页布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站 ...
- angularjs 表单校验指令_angular4.0的模板式表单、响应式表单及其错误提示
模板式表单 NgForm.NgModel.NgModelGroup是FormModule里的内容,NgForm会自动拦截标准的表单处理事件(eg.提交),angular用ngSubmit代替标准的表单 ...
- html响应式布局是什么,什么是响应式网页设计?响应式布局的实现原理
概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
- html响应式布局平移,响应式网页设计、响应式布局的实现原理
概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
- 前端设计 响应式设计_如何响应式设计
前端设计 响应式设计 This guest post about responsive design comes from Krasimir Tsonev! 这个关于响应式设计的来宾帖子来自Krasi ...
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- keras系列︱Application中五款已训练模型、VGG16框架(Sequential式、Model式)解读(二)...
引自:http://blog.csdn.net/sinat_26917383/article/details/72859145 中文文档:http://keras-cn.readthedocs.io/ ...
最新文章
- CBM——IT与业务融合的重要途径
- Go 语言编程 — gorm 的数据完整性约束
- Python 基础篇-python3安装pyHook和pywin32库
- 【Python】raise ValueError(Too many dimensions: %d %d. % (ndim, ndmax))问题
- matlab中文本文件与图像转化
- Content-Type一览
- c计算机中的函数,c(计算机语言)—搜狗百科
- 获取电脑的唯一识别码_教你如何知道自己的电脑能够装黑苹果
- [你必须知道的.NET]第三十回:.NET十年(下)
- mysql 解决慢sql_MySQL被慢sql hang住了,用shell脚本快速清除不断增长的慢sql的办法...
- FreeImage的学习总结总结(二)
- mp3转wav,详细方法介绍
- php阴阳万年历转换的接口,用php写的阴阳万年历
- Html+CSS实现奥运五环的制作超详细讲解,附源码下载
- STM32怎么判断按键是不是低电平有效
- 《C语言入门指南》合集版,学习c语言有这一篇就够了?
- GameFramework篇:使用源码替换GameFramework.dll
- udp协议提供的是什么服务器,udp协议是什么_有什么用
- 爬虫实战入门级教学(数据爬取->数据分析->数据存储)
- 移动通信基础知识学习笔记