实现响应式布局的五种方式
一、定义
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够。
优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
缺点
- 仅适用布局、信息、框架并不复杂的部门类型网站
- 兼容各种设备工作量大,效率低下
- 代码累赘,会出现隐藏无用的元素,加载时间加长
- 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
- 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
- 自适应布局是指通过JS及CSS的控制,借助rem、百分比等相对度量单位,在不同大小的设备上呈现相同的网页。
- 响应式布局是指据屏幕的大小自动的调整页面的展现方式,可以实现用一个网页自动适应不同大小的屏幕。
二、具体方法
1、响应式布局方法一:媒体查询
使用@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图,通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。
2、响应式布局方法二: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标签)
3、响应式布局方法三:百分比%
比如当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。
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则是相对于元素自身等等,造成我们使用百分比单位容易使布局问题变得复杂。
- 所以,不建议用%来做响应式布局。
4、响应式布局方法四:vw/vh
css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。 任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。
与百分比布局很相似,但更好用。
5、响应式布局方法五:flex弹性布局
弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。
尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面,利用弹性布局是都可以很轻松的实现的。
弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。
在父元素上,我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。
在子元素上,我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ,这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。
实现响应式布局的五种方式相关推荐
- 什么是响应式布局?响应式布局有几种方法?
目录 什么是响应式布局? 响应式布局的4种方法 媒体查询 百分比 vw/vh rem 什么是响应式布局? 响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕 响应式布 ...
- java响应式编程有几种方式_什么是响应式编程,Java 如何实现
什么是响应式编程,Java 如何实现 我们这里用通过唯一 id 获取知乎的某个回答作为例子,首先我们先明确下,一次HTTP请求到服务器上处理完之后,将响应写回这次请求的连接,就是完成这次请求了,如下: ...
- html 响应式布局 九宫格,两种方法实现响应式九宫格布局
html布局以及基础样式代码如下 响应式九宫格 html, body { color:#222; margin:0; padding: 0; text-decoration: none; } ul { ...
- CSS三列布局(五种方式)
/*前提:左右宽度为300px,高度为100px,中间宽度自适应*/* {margin: 0;padding: 0; } <!DOCTYPE html> <html lang=&qu ...
- 实现响应式布局有几种方法
目录
- CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
- 个人对响应式布局的理解
从字面上理解,响应式布局即CSS布局随着屏幕尺寸的变换而变化.首先我们要搞清楚什么是固定布局,什么是流式布局.固定布局(Fixed Layout)使用固定宽度的包裹(Wrapper), 内部的各个部分 ...
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- 响应式布局的实现方式(5种)
响应式布局 是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕. 1.百分比布局 百分比是相对于 包含块 的计量单位,通过对属性设置百分比来适应不同的屏幕 包含块: 1. 有父 ...
最新文章
- linux 非阻塞 socket,linux 非阻塞式socket编程求助。。
- 读书笔记《锋利的jQuery》
- 马云:我看到很多人去学MBA 但回来时都变蠢了
- MySQL的安装与配置--windows下安装
- 服务器性能估算参考(硬件-应用服务器)
- 常用的python测试脚本_详解Python的单元测试
- Axure企业官网通用模板web端+公司官网通用模板web端高保真原型+服务企业门户官网+加入我们+在线招聘+企业宣传+新闻动态+企业理念+产品与服务+公司通用版官方电脑端门户网站
- MATLAB PDE工具箱电磁场仿真平行电容板及电偶极子详解
- Tensorflow(r1.4)API--tf.nn.dropout
- 分页利用PageHelper.startPage(page, rows)时所放位置的注意事项
- python入门学习(excel导入mysql)
- 数据分析_04_pandas
- 2009年5月30日
- 变频器维修-丹佛斯变频器常见报警故障代码排除
- 基于Android的学生学习打卡监督系统
- Html5的废弃与新增全局属性及元素
- app测试、web测试-怎么测?
- 巨坑警告!程序员去银行写代码千万别去分行
- Qt扫盲-Assistant 助手使用总结
- 【Linux入门学习日记】ubuntu启动卡在logo界面