基于媒体查询和 rem 的响应式布局实践
本文首发于 dawei.lv
媒体查询 @media
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局。
下图展示了利用 @media
实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
下面我们来分析下如何实现上述 Demo。
<div class="grid"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>
复制代码
.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
PC 端区间
默认样式针对移动端编写,减少匹配规则,加快移动端的解析。当设备宽度大于 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
移动端区间,按 iPhone6 等比缩放,2 列布局576px~1024px
平板区间,按竖版 iPad 等比缩放,3 列布局大于1024px
PC 端区间,不缩放。4 列布局
总结,真实的项目中往往比这复杂的多,这个时候就需要把三端的设计稿拿过来仔细分析一下,哪些是可以抽象成一个 DOM 结构,清晰的 DOM 结构会让你的实现更加清晰。 附上本文的完整 Demo,也就是一开始的截图。 另外更复杂的实现可以参考下我司官网 www.bstcine.com 。
基于媒体查询和 rem 的响应式布局实践相关推荐
- html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...
- 怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
- 使用rem实现响应式布局
原理:rem是相对于根元素html的字体大小font-size的属性,浏览器默认字体大小16px,则1rem=16px 利用媒体查询,针对不同设备设置相应的font-size,项目中所有元素的大小均使 ...
- css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
- rem在响应式布局中的应用
https://www.cnblogs.com/yzg1/p/5337257.html 转载于:https://www.cnblogs.com/Sky-Ice/p/9592296.html
- Henry前端笔记之响应式布局与弹性布局
Henry前端笔记之响应式布局与弹性布局 弹性布局 Rem布局的原理解析(em 与 rem区别 ): rem如何实现自适应布局 使用CSS3 REM 和 VW 打造等比例响应式页面的便捷工作流 从网易 ...
- 前端响应式布局原理与方案(详细版)
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- html响应式布局ipad,响应式布局(Responsive design)
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式.通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验. 步骤 1.布局及设置meta标签 当创建一个响应式网站,或者非响应式网站变成响应式 ...
最新文章
- mimo系统matlab,OFDM—MIMO系统的matlab程序
- 定制一个自己想要的搜索页面
- From 《visual C++ 6.0开发工具与调试》
- CodeForces - 1359C Mixing Water(三分)
- 不一样的图片加载方式
- 堆溢出的DWORD Shoot核心原理-口语化
- CentOS 6.6系统安装
- 混合线路接入时,360、QQ管家等测速显示电信IP或任意线路的IP
- Elon Mask又搞大事情:新公司要将人脑与机器连接,给大脑上传想法不再是科幻...
- Idea起服务报错java heap space,GC overhead limit exceeded,Information:javac 1.8.0_181 was used to comp解决办法
- Google浏览器并行下载设置
- Ubuntu双系统卸载教程
- OpenRisc-27-wishbone接口的vga ipcore的分析与仿真
- IE无法上网,远程计算机或设备将不接受连接,其他浏览器可用
- 阿里云PCDN新亮点 自动调用HTTPDNS 解决域名劫持困扰
- 如何使用ReadProcessMemory读取多重指针
- mac 双开应用的方法
- 字节跳动数仓面试 三道题-JAVA编程+hive窗口
- 牛客 - 统计每个月兔子的数量
- EXECUTE IMMEDIATE和Using的用法
热门文章
- mac m4a转mp3怎么转?
- 金志文机器人歌叫什么_我的女友是机器人插曲叫什么名字
- SecureCRT 使用脚本命令自动记录日志
- Eclipse 一直不停 building workspace... 完美解决总结
- 打游戏最快的计算机,打游戏最好的笔记本电脑是哪一款-散热迅速运行流畅笔记本电脑大全...
- 新思路计算机二级教育机构排行,新思路教育·
- C# 如何编辑文件的摘要信息
- 微软用户服务器ldap,如何处理 LDAP 服务器 Cookie
- e2实名信息什么意思_你应该知道的实名验证核心信息
- spring 配置项 qualifier小解