html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局。
下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
下面我们来分析下如何实现上述 Demo。
.grid {
display: flex;
flex-wrap: wrap;
}
.item {
width: 50%;
}
@media (min-width: 576px) {
.item {
width: 33.333%;
}
}
@media (min-width: 1024px) {
.item {
width: 25%;
}
}
我们根据设备的宽度把设备分为三个区间,分别为:
小于576px
576px~1024px
大于1024px
默认样式针对移动端编写,减少匹配规则,加快移动端的解析。当设备宽度大于 576px 时,就匹配到了 @media (min-width: 576px) ,此时 width: 33.333%; 会将原来的 50% 覆盖掉,显示为 3 列。当设备宽度大于 1024px 时,就匹配到了 @media (min-width: 1024px) ,此时 width: 25%; 进一步覆盖掉原来的 33.333% ,显示为 4 列。
通过合理的布局 DOM 结构,可以让不同设备的浏览效果完全不同。配合 flex 布局的 order 属性,DOM 间的位置交换变得更加简单。
REM
我们使用三个断点解决了不同端的布局问题,但这只是第一步。我们现在还是用的 px 做单位,设计师给我们出的 iPhone6 的设计稿,一个按钮 80px 宽度,iPhone6 上可以这么写。iPhone5s 空间不足导致换行、iPhone6 Plus 留白怎么办?这时候就要召唤出我们的大杀器 rem 了。
rem 是一个根据 html 根元素 font-size 计算的相对单位。 元素实际尺寸 = 元素 rem 值 x html 的 font-size 值 。也就是说当 html 的 font-size 设置为 50px 时,2rem 的元素实际尺寸就是 100px。
我司设计师通常使用 2 倍的 iPhone6 作为设计稿。iPhone6 设计稿的宽度为 750px ,对应实际尺寸 350px 。为了方便换算,我们将 html 的 font-size 设置为 50px ,实际尺寸 100px = 2rem 。而这 2rem 正好等于设计稿上的 200 向左移动两位小数点,换算起来非常方便。
你说的我都懂,但这跟 5s、6p 适配有什么关系呢??
当然有关系啦,我们可以让 html 的 font-size 基于 iPhone6 等比例缩放,这样就能实现对 5s、6p 的适配。来看一段代码:
var clientWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";
计算出当前设备的宽度基于 750 的尺寸,按比例换算成 px,实现不同尺寸的手机设置等比例的 html font-size。
我们看下实际效果图:
将 @media rem 结合起来
将之前讲的两点结合起来,代码如下:
var clientWidth = document.documentElement.clientWidth;
if (clientWidth < 575) {
document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";
} else if (clientWidth < 1024) {
// 竖版 iPad 的 2x 尺寸
document.documentElement.style.fontSize = (clientWidth / 1536) * 100 + "px";
} else {
document.documentElement.style.fontSize = "50px";
}
最终实现了:
小于576px
576px~1024px
大于1024px
总结,真实的项目中往往比这复杂的多,这个时候就需要把三端的设计稿拿过来仔细分析一下,哪些是可以抽象成一个 DOM 结构,清晰的 DOM 结构会让你的实现更加清晰。 附上本文的完整 Demo,也就是一开始的截图。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践相关推荐
- html标签查询,css性性查询,javascript函数查询
我了大家的方便,我整理了下前端常用的html标签查询,css性性查询,javascript函数查询,希望对大家的工作有帮助! ************************************* ...
- HTML引入媒体查询CSS,CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则. 例如:你可以针对不同的媒体类型(包括显示器.便携设备.电视机,等等)设置 ...
- android 媒体查询,CSS常用媒体查询应用
原标题:CSS常用媒体查询应用 媒体类型 媒体类型 sans - serif字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读. 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范 ...
- ORM单表查询,跨表查询,分组查询
ORM单表查询,跨表查询,分组查询 单表查询之下划线 models.Tb1.objects.filter(id__lt=10, id__gt=1) # 获取id大于1 且 小于10的值models.T ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- 深入理解CSS Media媒体查询
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css 媒体查询 移动端,媒体查询(pc端,移动端不同布局)
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
- 学姐叫我看 CSS 新出的容器查询,然后把公共组件重构成响应式的!
作者:AAhmad Shadeed 译者:前端小智 来源:shadeed 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.c ...
- CSS如何设置高度为屏幕高度_(15)让这些“展示”有更好的扩展性——媒体查询 | CSS...
原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...
最新文章
- RNA和机器学习:多维生物标志物的合理设计
- js 区分 safari chrome iso
- 前端:JS几种常见的排序
- 用matlab解一维单势垒波函数,一维多势垒结构准束缚态的MATLAB分析计算
- spring配置数据库
- 数据反正模拟 matlab,[2018年最新整理]信号处理MATLAB函数.doc
- 手写分页 个人感觉还能优化,甚至抽象出来,需要高手讲解
- 在ASP.net中的UpdatePanel,弹窗失败解决办法
- XP共享拒绝访问,全面解决
- 使用Tampermonkey进行JavaScript编程
- 用微PE安装KALI LINUX到U盘,【U盘安装kali】U盘+kali+pe三合一教程
- 机器学习面试题(上)
- 在Java中不允许使用使用一下字母组合作为文件名(不区分):CON,PRN,AUX,NUL,COM1,COM2,COM3,COM4,COM5,COM6,COM7,COM8,COM9,LPT1,LPT2
- DP 转 HDMI视频信号转换 CS5263替代IT6563
- html5 css背景图片满,css background-size与背景图片填满div
- Spring Data JPA 之 理解 Persistence Context 的核心概念
- 如何截取视频片段 批量截取片段的方法
- 【D3.js 学习总结】12、D3布局-集群图
- .Net中DLL冲突解决(真假美猴王)
- Flash Timeout.Reset the Target and try it again 报错解决方案 STM32 ST-LINK Utility下载程序操作