总是听别人说响应式布局,原来这么简单
总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局
,其实原理很简单,下面就简单整理了一下分享给大家。
什么是响应式布局
如图就是响应式布局的体现,简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念随着移动设备的兴起而深入人心。
比如 头条
他做的就不是响应式布局,他通过实时检测设备信息,在 www.toutiao.com
和 m.toutiao.com
两个网站之间切换。而最近比较火的开发者社区 segmentfault.com
就是响应式布局,页面的布局会会随着你拖动浏览器窗口大小变化而变化。响应式布局没有绝对的话好与坏,需要根据网站的性质来确定,比如 toutiao
的页面元素非常多,页面需要包括所有屏幕尺寸的样式显示不是很好操作,然而 segmentfault
页面元素较少,反而放在一起方便维护。
如何快速实现web响应式布局
我们通过一个例子来具体说明,首先使用 @media
关键字为不同的屏幕尺寸设置不同样式,关于 @media
我们下文有更详细的介绍
代码片段:
<style type="text/css">@media only screen and (min-width: 480px) {.col-sm-6, .col-sm-12 {float: left;}.col-sm-12 {width: 100%;}.col-sm-6 {width: 50%;}
}
@media only screen and (min-width: 768px) {.col-md-6, .col-md-12 {float: left;}.col-md-12 {width: 100%;}.col-md-6 {width: 50%;}
}
</style>
<div class="container"><div class="col-md-12 col-sm-12 row"><div class="col-md-6 col-sm-12 col-1 col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="col-md-6 col-sm-12 col-2 col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
</div>
我们简单解释一下上述代码片段 min-width
指的是当屏幕尺寸大于当前值的时候样式生效。外层的 div
包裹内层的两个 div
。col-md-6col-sm-12
当屏幕尺寸大于 768px
的时候子 div
宽度是父 div
的一半,所以是并排。当屏幕尺寸大于 480px
的时候子 div
宽度和父 div
的宽度一样。下图为不同尺寸下的效果图。
768px
480px
注意观察的同学又发现问题了,图二没有办法看啊,太小了吧。是的,我们的响应式还没有做完,这个时候我们在 head
里面添加如下一行代码再试试?那么问题来了,图一尺寸大于 768px
不假,但是也大于 480px
啊,那么怎么就按照 768px
的尺寸排布了呢?这里就涉及到了 CSS优先级
:CSS
的基本优先级如下 (外部样式)Externalstyle sheet<(内部样式)Internalstyle sheet<(内联样式)Inlinestyle
如果优先级一样便有一个覆盖原则,后面的覆盖前面的,于是如例,当屏幕尺寸慢慢变大到 768px
的时候,后者遍生效了。
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
如图神奇的一幕出现了:
width=device-width: 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度.这样我们就大功告成了.如需要下载源码请点击,在线查看请点击。想知道为什么 meta
有这么大作用请翻看下文。
Meta ViewPort 是什么
手机浏览器是把页面放在一个虚拟的“窗口”( viewport
)中,通常这个虚拟的“窗口”( viewport
)比屏幕宽,默认是把网页挤到一个很小窗口以便全部预览,这样也不会破坏没有适配手机布局的网页。移动版的 Safari 浏览器最新引进了 viewport
这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也逐步支持。我们如果做了手机屏幕尺寸的适配就可以手动调整 viewport
,这样就可以把网页内容和手机布局合理的展示给用户。下面是具体参数的说明:
width |
设置layout viewport 的宽度,为一个正整数,或字符串”width-device” |
initial-scale |
设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale |
允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale |
允许用户的最大缩放值,为一个数字,可以带小数 |
height |
设置layout viewport 的高度,这个属性对我们并不重要,很少使用” |
user-scalable |
是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许 |
Media Queries 详解
中文叫做媒体查询,它包含一个媒体类型(media type)和至少一个表达式,用媒体特性限制样式表的作用范围。下面我们直接通过例子对相对的关键字进行分析:
only
用于向早期浏览器隐藏媒体查询,比如IE如果不支持的话直接忽略当前定义的样式。和其他表达式一起用需要 and
@mediaonly screenand(min-width:400px)
screen
screen是一种 媒体类型
,例中的 screen
意思是仅支持彩色电脑显示器。其他属性如下:all:适用与所有设备 print:paged material and documents viewed on screen in print previe mode. screen: 彩色电脑显示器 speech:intended for speech synthesizers
and
and
是一种 操作符
,表示被链接的表达式不许同时满足,其他表达式如下:and
:所有条件必须满足 ,
:只要满足一种条件即可 not
:条件的取反
min-width
min-width
是 媒体特征
,他的意思是最小宽度满足的时候就为真,其他媒体特征:
width: viewport width
height: viewport height
aspect-ratio: viewport的宽高比如:16/9
orientation: 宽度和高度的大小关系
resolution: pixel density of the output device
scan: scanning process of the output device
grid: is the device a grid or bitmap
color: number of bits per color component of the output device, or zero if the device isn’t color
color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table
特别推荐一个分享架构+算法的优质内容,还没关注的小伙伴,可以长按关注一下:长按订阅更多精彩▼如有收获,点个在看,诚挚感谢
总是听别人说响应式布局,原来这么简单相关推荐
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- 响应式布局的个人博客
希望你的喜欢. 文章目录 前言 一.个人博客的相关图片 二.相关代码 总结: 前言 这是本人去年的时候做的一个响应式布局的个人博客,主要是通过HTML5+CSS3完成的,非常适合不懂响应式布局的小白练 ...
- 判断两个图片的特征向量_响应式布局提高篇 图片正确的打开方式
作者 | Brilliant Open Web团队 编辑 | Aaron 本文承接上一章的内容,接着介绍响应式布局设计,主要讲如何实现响应式图片.通过对图片适配问题的说明,加深对响应式图片的理解,并分 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- flex布局和响应式布局
flex伸缩布局 一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局,采用Flex布局的元素,称为flex容器cont ...
- CSS - 响应式布局(二)响应式栅格系统
目录 响应式栅格系统 栅格 栅格系统 响应式栅格系统 BootStrap响应式栅格系统 简单说明 利用SCSS实现BootStrap的响应式栅格系统 响应式栅格系统 栅格 在弄清楚响应式栅格系统前,我 ...
- 在vue中使用flexible响应式布局——默认html字体大小(font-size)是54px的问题
rem响应式布局中,最著名的就是淘宝出品的flexible,马上到新公司,听经理说会有大屏幕展示,所以周末研究一下. 先使用命令创建一个vue项目 vue init webpack 项目名称 安装fl ...
- HTML CSS笔记(没有基础内容,比如br标签是换行什么的),CSS2.1,CSS3,响应式布局
每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可 推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容 文章目录 一.基础(HTML和CSS中较复杂内容) ...
- 实现响应式布局的五种方式
一.定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够. 优点 面对不同分辨率设备灵活性强 能够快捷解决多设 ...
最新文章
- 童话镇计算机乐谱,童话镇简谱(歌词)-陈一发演唱-桃李醉春风记谱
- Secret Passwords CodeForces - 1263D(并查集)
- Java-进阶:Java-File--IO—1
- linux的基础知识——进程组
- python内置函数面向对象_Pyhton——面向对象进阶二:类的内置函数补充、描述符...
- 【Elasticsearch】Elasticsearch 悬空索引
- 常用的关系型数据库的优劣与选择
- Refactoring Page Head
- 数据分析软件SPSS22的授权及汉化
- java 多边形裁剪_使用 mesh 实现多边形裁剪图片!Cocos Creator!
- 输入年份和月份输出该月有多少天python_输入一个年份和月份,打印出该月份有多少天(考虑闰年),用switch语句编程...
- Word高效指南 - 中文文档首行自动缩进2个字符
- Python——组合数据类型(字符串、元组、列表、字典)转换总结
- Windows Rootkit 技术分析
- asp.net 下载文件几种方式
- ps倒出gif只有html,PS中我做好了帧(动画没问题),但是怎么导出GIF的动画?
- 为人处事说话技巧思维
- 免费、强大的开源笔记软件Joplin综合评测 —印象笔记的开源替代
- 云计算-让企业更方便
- Ansys 2021R1 安装
热门文章
- 星际2正在等待暴雪服务器的响应,win7系统玩星际2一直停留在"正在更新暴雪启动器"页面的解决方法...
- PTA数据结构与算法题目集(中文)7-25
- HDU2032(杨辉三角)
- vue热更新失效_vue cli@3项目style标签里面热更新失效的问题
- python初始化_Python list初始化
- 位运算详解+竞赛常见用法总结
- Mysql 755和750权限,chmod 755 究竟是什么鬼?
- LeetCode-106-Construct Binary Tree from Inorder and Postorder Traversal
- tomcat高并发配置调优
- jQuery取值的一些奇奇怪怪的操作