百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

响应式布局方法总结

myzbx 2024-12-10 18:26 44 浏览

响应式布局方法总结

定义

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够。

优点

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点

  • 仅适用布局、信息、框架并不复杂的部门类型网站
  • 兼容各种设备工作量大,效率低下
  • 代码累赘,会出现隐藏无用的元素,加载时间加长
  • 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

响应式与自适应区别

  • 响应式:只需要开发一套代码。 响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
  • 自适应:需要开发多套界面。 通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面。

响应式布局方法一:媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面,可以针对不同屏幕的大小,编写多套样式,从而达到自适应的效果。举例来说:

@media screen and (max-width: 960px){
 body{
 background-color:#FF6699
 }
}

@media screen and (max-width: 768px){
 body{
 background-color:#00FF66;
 }
}

@media screen and (max-width: 550px){
 body{
 background-color:#6633FF;
 }
}

@media screen and (max-width: 320px){
 body{
 background-color:#FFFF00;
 }
}

上述的代码通过媒体查询定义了几套样式,通过max-width设置样式生效时的最大分辨率,上述的代码分别对分辨率在0~320px,320px~550px,550px~768px以及768px~960px的屏幕设置了不同的背景颜色。

通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片。比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。

响应式布局方法二:百分比%

比如当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。

height,width属性的百分比依托于父标签的宽高。但是,padding、border、margin等属性的情况又不一样?

  • 子元素的top和bottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样,子元素的left和right如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度。
  • 子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
  • 子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
  • border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

缺点

  • 计算困难,如果我们要定义一个元素的宽度和高度,按照设计稿,必须换算成百分比单位。
  • 各个属性中如果使用百分比,相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height,而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等,造成我们使用百分比单位容易使布局问题变得复杂。
  • 所以,不建议用%来做响应式布局。

响应式布局方法三:vw/vh

css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。 任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。

与百分比布局很相似,但更好用。

响应式布局方法四:rem

rem单位是相对于字体大小的html元素,也称为根元素。 默认情况下,html元素的font-size为16px。所以此时1rem = 16px。

第一版

@media screen and (max-width: 414px) {
 html {
 font-size: 18px
 }
}

@media screen and (max-width: 375px) {
 html {
 font-size: 16px
 }
}

@media screen and (max-width: 320px) {
 html {
 font-size: 12px
 }
}

利用rem和媒体查询,在分辨率发生变换时,给它不同的font-size。

优化版

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用,设置一次
init()
// 监听手机旋转的事件的时机,重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)

理解:上面代码实现了,无论设备可视窗口如何变化,始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。

以上代码需在dom之前写入(可放在head里面第一个script标签)

利用UI框架实现响应式布局

其实,现在的主流UI框架都会考虑到响应式布局这个问题,比如elementUI,iview等框架提供了栅格系统,<row>搭配<col>来实现响应式布局。 所以在工作中直接拿来使用就完事了。

移动端响应式布局 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • width=device-width: 是自适应手机屏幕的尺寸宽度。
  • maximum-scale:是缩放比例的最大值。
  • minimum-scale:是缩放比例的最小值。
  • inital-scale:是缩放的初始化。
  • user-scalable:是用户的可以缩放的操作。

这个写法是用户不能缩放的页面设计。因为,如果页面能缩放的话,就会影响用户的体验,在手机端,我们都可以找到点击的按钮或者自己感兴趣的菜单进行操作。其二:就是我们如果让页面缩放的话,就完全暴露了我们手机app的程序是html的架构了。所以,我们专为移动端的设计页面的时候,就不需要用户进行缩放了。

flexible.js

flexible.js是阿里手淘团队开发的。用来解决移动端的适配问题。

  • 假设现在要适配一个iphone6的设备。设计师给了一个750px宽度的设计稿(注意这里是750px而不是375px)前端工程师用750px的这个比例开始还原把宽高是px的转换成rem字体使用px而不使用remflexible.js会自动判断dpr进行整个布局视口的放缩至于flexible.js怎么使用的可以自行搜索,因为本人移动端做得少,就不再多说了。
  • 我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

文章来源:https://juejin.im/post/5dc64eef6fb9a04abd4cd1b3

作者:你喜欢吃青椒么

相关推荐

别让水 “跑” 出卫生间!下沉设计打造滴水不漏的家

你是否遭遇过卫生间的水“偷偷溜”进客厅,导致木地板鼓起、墙角发霉的糟心事?又是否为卫生间门口反复渗漏,不得不一次次返工维修而头疼不已?在家庭装修中,卫生间防水堪称“兵家必争之地”,而卫生间门口下...

歼-10CE vs 阵风:谁才是空中霸主?全面性能对比解析

歼10CE与法国阵风战斗机性能深度对比分析一、总体定位与设计哲学歼10CE:单发中型多用途战斗机,侧重于空优(制空权争夺)和对地对海打击,具有较高的性价比和较强的多任务能力。法国阵风战斗机:双发中型多...

知名移植工作室肯定Switch2的图形性能,却被CPU拖了后腿

虽然Switch2发售多日,但没入手的玩家对其性能还是有顾虑。近日,知名移植工作室Virtuos的技术总监在接受采访时讨论了Switch2的性能,并给出了他们工作室的评价。简单来说,Switch2在D...

虹科实测 | CAN XL vs CAN FD传输性能深度对比:速率翻倍,抖动锐减!

导读在汽车电子与工业通信领域,CAN协议持续进化,推动着数据传输效率的提升。本次实测基于虹科PCAN-USBXL与虹科PCAN-USBProFD硬件,在同等严苛条件下对比CANXL与CANF...

1J117合金材料优异的耐腐蚀性、机械性能

1J117合金材料概述定义:1J117是一种不锈软磁精密合金,属于铁铬基合金,其圆棒产品具有特定的形状和尺寸,可满足各种工业应用中的特定需求。标准:技术条件标准为GB/T14986,品种规格标准...

据高管所称,Switch2能轻松移植XSS平台60帧游戏

任天堂,作为主机游戏界的御三家之一,一直注重游戏性而不注重更新升级硬件设备是其最大的特点。各位任豚们,忍受着任天堂早已落后硬件设备,真想感叹一句,天下苦任久矣!但Switch2的出现或许正在渐渐的改变...

FJK-110LED-HXJSN磁传感器有哪应用

作为一名从事电子技术相关工作的自媒体人,我经常会遇到各种传感器的应用问题。其中,FJK-110LED-HXJSN磁传感器是一款在工业自动化、智能设备等领域比较常见的磁场检测元件。今天我想和大家聊一聊这...

浅谈欧标方管200x200x5-12mm质S275JRH的优势与劣势

欧标方管200x200x5-12mm材质S275JRH是一种常见的结构用钢材,广泛应用于建筑、机械制造、桥梁、钢结构等领域。本文将对这种方管的优势与劣势进行浅谈,以帮助读者更好地了解其特性和适用场景。...

宽带拨号错误 651 全解析:故障定位与修复方案

在使用PPPoE拨号连接互联网时,错误651提示「调制解调器或其他连接设备报告错误」,通常表明从用户终端到运营商机房的链路中存在异常。以下从硬件、系统、网络三层维度展开排查:一、故障成因分类图...

模型微调:从理论到实践的深度解析

在人工智能领域,模型微调已成为提升模型性能、使其适应特定任务的关键技术。本文将全面系统地介绍模型微调的各个方面,帮助读者深入理解这一重要技术。一、什么是模型微调模型微调是指在已经训练好的预训练模型基础...

汉语拼音 z、c、s图文讲解(拼音字母表zcs教学视频)

以下是汉语拼音z、c、s的图文讲解,结合发音要领、书写规范及教学技巧:一、发音方法与口诀1.z的发音发音要领:舌尖轻抵上齿背,形成阻碍后稍放松,气流从窄缝中挤出,声带不振动(轻短音)。口诀:“写字写...

吴姗儒惹怒刘宇宁粉丝!吴宗宪护航「是综艺梗」叮咛女儿对话曝光

记者孟育民/台北报道Sandy吴姗儒在《小姐不熙娣》因为节目效果,将男星刘宇宁的头像踩在地上,引起粉丝怒火,节目发声明道歉后仍未平息,她也亲自发文郑重道歉:「我对刘宇宁本人完全没有任何恶意,却在综艺表...

苹果错误地发布了macOS Tahoe公开测试版 现已将其撤下

一些Beta测试人员下载了他们以为是macOSSequoia15.6RC的版本,但却错误地下载了macOSTahoe26公开测试版,后来苹果修复了该问题。苹果预计将于7月25...

make的多种用法!(make 的用法总结)

一、make的用法美make[meik]①V.制造;制定,拟定;使变得,使处于;造成,引起;整理(床铺);做,作出;强迫;挑选,任命…②n.(机器、设备等的)品牌,型号;结构,构造;通电,接电⑤[...

北顿尖刀哗变?俄第20近卫集团军损失惨重,拒绝执行指挥官命令?

【军武次位面】作者:太白近日,外国社交媒体“电报”上传出了一些消息,称俄罗斯在北顿涅兹克战场上的“尖刀”部队之一,俄第20近卫集团军因为损失惨重,已经出现了部分部队拒绝执行指挥官命令,甚至哗变的情况。...