当前位置:首页 > 技术教程 > 正文内容

分享响应式布局的几种方法

爱站阁1个月前 (01-25)技术教程32

教程操作环境:windows10系统、css3版,DELL G3电脑,该方法适用于所有品牌电脑。

推荐:css视频教程

响应布局有的方法有:

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

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

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

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

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

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

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

元素的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。

优化

//动态为根元素设置字体大小

function init () {

 // 获取屏幕宽度

 var width = document.documentElement.clientWidth

 // 设置根元素字体大小。此时为宽的10等分

 document.documentElement.style.fontSize = width / 10 + 'px'

}

//首次加载应用,设置一次

init()

// 监听手机旋转的事件的时机,重新设置

window.addeventListener('orientationchange', init)

// 监听手机窗口变化,重新设置

window.addEventListener('resize', init)//动态为根元素设置字体大小

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标签)

响应式布局方法五:flex弹性布局

弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。

尤其是现在类似于某宝、某东一类的电商Web站或者手机app的页面,利用弹性布局是都可以很轻松的实现的。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

在父元素上,我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上,我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ,这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

以上就是响应式布局有几种方法的详细内容,更多请关注php中文网其它相关文章!

扫描二维码推送至手机访问。

版权声明:本文由爱站阁发布,如需转载请注明出处。

本页地址:http://www.aizhange.com/jsjc/130.html

分享给朋友:

相关文章

Python与Java:Web开发

作为世界上最流行的两种编程语言,Python和Java几乎用于所有事物。Web开发也不例外。如果您正在考虑成为Web开发人员或去Web开发训练营,自然会想知道这些语言如何与您可能要完成的任务进行比较。...

HTML5在手机端实现视频全屏展示方法

第一种:将视频放大来控制。视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 110% ,可以实现全屏,超过是溢出隐藏就可以了。确定:手机屏幕尺寸不固定,这...

零基础怎样入行IT行业?

随着移动互联网的飞速发展,IT行业迎来了新一轮的发展。一些IT工作的薪水水平远高于其他行业。如果抓住机会进入有潜力的行业,您将获得比其他行业高几倍的薪水。  当前移动互联网的发展为...

如何绕过CDN查网站真实IP地址

如何绕过CDN查网站真实IP地址

什么是CDN?CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发...

liunx学习之ls命令

cd [目录名称]  切换目录 mkdir [目录名称] 创建目录   mkdir /tmp/bj  在tmp下创建 bj 目录mkdir -p/[目...

Html5原生拖拽相关事件简介以及基础实现

Html5原生拖拽相关事件简介以及基础实现

公司项目需求,要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章,稍微学习了一下。实现效果如下图。拖拽实现主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。