响应式网格(栅格化)布局总结
任务目的
- 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同。
任务描述
- 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中。
任务注意事项
- 网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方。网格布局是一种实现这一需求的办法,它的好处是,把所有的宽度分为固定栏数(常用 12 栏),从而更高效的控制元素宽度。而这功能,我们使用 HTML 和 CSS 就能实现了。
- 以 BootStrap 的网格系统为例,DOM 元素类名形如 col-md-4;其中 col 是“列” column 的缩写;md 是 medium 的缩写,适用于应屏幕宽度大于 768px 的场景;4 是占四栏的意思。因此,col-md-4 的意思是,在屏幕宽度大于 768px 时,该元素占四栏。
在线学习参考资料
- BootStrap 官网:如果你没用过的话,至少了解一下它是做什么的
- Bootstrap grid examples:改变浏览器宽度,查看不同类名元素的表现,理解网格系统的作用。然后,通过“审查元素”查看对应 CSS,思考这一系统是如何实现的
- BootStrap 带 offset 的网格系统
- Creating Your Own CSS Grid System:你可以先自己想想怎么实现,没有思路的话看看别人的做法
响应式网格(栅格化)布局总结
1、 响应式网页设计
响应式网页设计(Responsive web design,缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。是一种网页设计的技术方法,该设计可使网站在多种浏览器设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。
采用RWD设计的网站,使用CSS3 Media queries,流式的基于比例的网络和自适应大小的图像以适应不同大小的设备。
流式网络概念要求页面元素使用相对单位如百分比,或字体排印学调整大小,而不是绝对的单位如像素或点。(可先用像素排版,再用元素大小/容器大小计算百分比)。
灵活的图像也以相对单位调整大小(最大到100%),以防止它们显示在包含他们的元素之外。
Media queries,允许网页根据访问站点设备的特点而使用不同CSS样式规则,最常用的是浏览器的宽度。
2、 CSS3 @media Rule
@media rule用于定义不同类型或设备媒体的展示规则。在CSS2中,这被称为media types,在CSS3中被称为media queries。
Media queries查询设备能力,可以查出很多内容,比如:视口的长宽,设备长宽,方向(手机是在风景模式还是肖像模式),解析度等
CSS 语法:
@media not|only mediatype and (media feature) {
CSS-Code;
}
也可对不同媒体使用不同样式表
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Media Types
all:用于所有类型设备。
print:用于打印机。
screen:用于电脑显示屏,平板,手机等。
Media Features
any-hover:是否有任何可用的输入机制允许用户将鼠标悬停在元素上?
any-pointer:任何可用的输入机制是指向设备,如果是,它是多么准确?
aspect-ratio:视口的宽高比。
color:输出设备每个颜色的bit数。
color-index:设备可展示的颜色数。
grid:设备是灰度还是位图。
height:视口高度。
hover:主要的输入机制是否允许用户将鼠标悬停在元素上。
inverted-colors:浏览器或底层操作系统是否反色。
light-level:当前环境光级别。
max-aspect-ratio:展示区域的宽高最大比。
max-color:输出设备每个颜色的最大bit数。
max-color-index:设备可展示的最多颜色数。
max-device-aspect-ratio:设备最大宽高比。
max-device-height:设备最大高度,例如电脑屏幕。
max-device-width:设备最大宽度,例如电脑屏幕。
max-height:展示区域最大高度,例如浏览器窗口。
max-monochrome:在单色或灰度设备上每个颜色的最大bit数。
max-resolution:设备最大分辨率,使用dpi或dpcm。
max-width:展示区域的最大宽度,例如浏览器窗口。
min-aspect-ratio:展示区域最小宽高比。
min-color:输出设备每个颜色最少bit数。
min-color-index:设备可展示的最小颜色数。
min-device-aspect-ratio:设备最小宽高比。
min-device-width:设备最小宽度,比如电脑屏幕。
min-device-height:设备最小高度,比如电脑屏幕。
min-height:展示区域最小高度,比如浏览器窗口。
min-monochrome:在单色或灰度设备上每个颜色的最小bit数。
min-resolution:设备最小分辨率,使用dpi或dpcm。
min-width:展示区域最小宽度,比如浏览器窗口。
monochrome:单色或灰度设备每个颜色的bit数。
- orientation:视口的方向(风景模式或肖像模式)
- overflow-block:输出设备如何处理沿着块轴溢出视口的内容。
- overflow-inline:可以滚动沿着内联轴溢出视口的内容。
pointer:主要的输入机制是指向设备,如果是,它是多么准确?
resolution:输出设备分辨率,使用dpi或dpcm。
scan:输出设备的扫描过程。
scripting:scripting(比如javascript)是否可用。
update-frequency:输出设备可以多快修改内容的外观。
width:视口宽度。
3、 HTML <link>标签media属性
Media属性指定不同媒体类型使用哪一个CSS样式表。
语法
<link media="value">
可用操作符
and:and操作符。
not:not操作符。
,:or操作符。
设备
all:默认值,用于所有设备。
print:用于打印预览模式或打印的纸张。
screen:用于电脑屏幕,平板或智能手机等。
speech:用于“读取”页面的屏幕阅读器。
值:
aspect-ratio:指定目标展示区域的宽高比。使用“min-”和“max-”像素。
example: media="screen and (max-aspect-ratio:16/9)"
color:指定每个颜色的bit数。
example: media="screen and (min-color:3)"
color-index:颜色数。
example: media="screen and (min-color-index:256)"
grid:指定展示设备是网格还是位图。“1”代表网格,“0”代表其他。
example: media="handheld and (grid:1)"
height:制定展示区域高度。使用“min-”和“max-”像素。
example: media="screen and (max-height:700px)"
monochrome:指定单色帧缓冲区中每个像素的位数。使用“min-”和“max-”像素。example: media="screen and (min-monochrome:2)"
- orientation:指定展示目标或纸张的方向。可取值为:“portrait”或“landscape”。 example: media="all and (orientation: landscape)"
resolution:指定显示目标或纸张的像素密度(dpi或dpcm)。使用“min-”和“max-”像素。
example: media="print and (min-resolution:300dpi)"
scan:指定tv的扫描方法。可取值为:“progressive”和“interlace”。
example: media="tv and (scan:interlace)"
width:指定目标展示区域的宽度。使用“min-”和“max-”像素。
example: media="screen and (min-width:500px)"
转载于:https://www.cnblogs.com/melbourne1102/p/6505163.html
响应式网格(栅格化)布局总结相关推荐
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- 响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局
响应式网格项目动画布局 重点 (Top highlight) 第二部分 (Part II) Now that you have a basic understanding of how to use ...
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- HTML瀑布流布局实现网易LOFTER——masonry响应式网格布局库(非jQuery)
HTML瀑布流布局--masonry响应式网格布局库(非jQuery) 瀑布流布局是流式布局的一种.是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会 ...
- 响应式网页的布局设计
值得收藏的14款响应式前端开发框架 作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
- 任务八:响应式网格(栅格化)布局
任务目的 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述 需要实现如 效果图 所示,调整浏览器宽度查看响应式效果,效果 ...
- 前端响应式/自适应/流动布局
文章目录 1. 控制视口(viewport) 2. 媒体查询 2.1 媒体类型 2.2 媒体特征 2.3 逻辑条件 2.4 使用媒体查询设置断点 3. 图片的自适应 4 自适应图片等素材 5 不使用绝 ...
- 微金所页面制作(Bootstrap 响应式开发 栅格布局 响应式布局)
该页面适用于 PC端 和 移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果 二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
- 从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局,极其重要)
html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性 提示 博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...
最新文章
- Windows server 2008 远程桌面建立
- python 16进制加法_在python中追加2个十六进制值
- Android之SurfaceView简介(一)
- 数学推导题,NTT,快速数论变换,Wannafly-乒乓球
- 前端学习(2793):完成联系我们页面和地图
- 解决 dubbo问题:Forbid consumer 192.xx.xx.1 access service com.xx.xx.xx.rpc.api.xx from registry 116.xx1
- 管理口SSH服务存在拒绝服务漏洞(CVE-2016-6515)
- 写爬虫时遇到的问题及解决方法
- 生活的 tricks
- 小米平板android版本,小米平板2发布:分Android和Wind 10两个版本
- Mac勿扰模式使用技巧
- html5抽奖转盘生成器
- 原生H5+JS文件上传
- Python3 async def和@asyncio.coroutine的区别
- linux常用命令-文件搜索(locate_find_grep)
- 自动化如何影响到你?传统5天工作制或成过去
- Destoon 自定义模块
- Python实战:导出聊天记录分析你和你的对象聊了什么
- vue 右键菜单contextMenu
- EasyRecovery 简体中文版