HTML——响应式布局
发布日期:2021-06-29 11:16:37
浏览次数:2
分类:技术文章
本文共 4082 字,大约阅读时间需要 13 分钟。
响应式布局
何为响应式布局
响应式布局(Responsive design),意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
如何制作响应式布局
一、rem布局
1.em相对于父元素的字体大小而言;rem是相对于html的字体大小而言 2.优势:可以通过修改html的文字大小来改变整个页面中元素大小,实现整体控制 二、@media媒体查询:针对不同的屏幕尺寸设置不同的样式 1.语法: @media mediatype and|not|only (media feature){ CSS-Code; }①mediatype查询类型:all(所有设备)、print(打印机和打印预览)、screen(电脑屏幕、平板电脑、智能手机)
②关键字:and(多个媒体设备连接在一起)、not(排除某个设备,可省略)、only(指定某个设备,可省略 ③media feature媒体特性(要用小括号包含):width、max-width、min-width2.rem和@media媒体查询相结合,不同的设备设置不同的html文字大小
3.引入资源:针对不同的屏幕尺寸调用不同的css文件(最好的方法是从小到大) link rel=“stylesheet” href=".css" media=“mediatype and|not|only (media feature)”> 三、栅格系统 1.把页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。 2.①行必须放到container容器里
②实现列的划分需要给列加类前缀 ③列大于12,多余的列将会作为整体另起一行 ④xs-超小;sm-小;md-中等;lg-大 ⑤<768px–width:100%;height:.col-xs-; >=768px–width:750px;height:.col-sm-; >=992px–width:970px;height:.col-md-; >=1200px–width:1170px;height:.col-lg-; ⑥可以同时为一列指定多个设备类名,以便划分不同的份数。如class=“col-md-4 col-sm-6” ⑦每一列默认有左右15px的padding(可用css强制去掉)3.列嵌套:栅格系统内置的栅格系统将内容再次嵌套,一个列内再分成若干个小列。(列嵌套最好加个行row,这样可以取消父元素的padding,且高度自动和父级一样高)
4.列偏移:col-md-offset-(偏移的份数是12-两个盒子的份数);如果只有一个盒子且想要居中,则偏移(12-盒子的份数)/2 5.列排序:col-md-push-:推。col-md-pull-:拉。 6.响应式工具:利用媒体查询,针对不同设备进行展示或隐藏内容 隐藏:hidden-xs/sm/md/lg 显示:visible-xs/sm/md/lg
响应式布局简单案例
当网页页面在正常情况下如下图所示在一行上排列
当网页页面缩小到767px甚至以下时,整体布局方式发生改变,如下图所示。 首先先用ul和li设置几个导航栏盒子,宽度为750px,每个li宽度为93.75px,左浮动,在正常页面时正常排列。当页面缩小时,我们需要利用媒体查询额外设置样式,整个ul宽度为页面的100%,每个li宽度为33.33%。
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
* { margin: 0; padding: 0; box-sizing: border-box; } .container { margin: 0 auto; width: 750px; } li { list-style: none; float: left; width: 93.75px; height: 2rem; line-height: 2rem; text-align: center; color: white; background-color: green; } @media screen and (max-width:767px) { .container { width: 100%; } li { width: 33.33%; } }
栅格布局简单案例
声明与引入样式
整体css样式
* { box-sizing: border-box; } [class^=col] { border: 1px solid #ccc; } .container .row:nth-child(1) { background-color: pink; } .container .row>div { height: 50px; background-color: pink; /* 想要子盒子之间有空隙,不能使用margin,因为栅格系统原理是把子盒子width平均分配,用float:left浮动一行显示,因此加了margin后会掉下去 */ }
一、如果孩子的份数相加等于12,则会占满整个.container的宽度,如果没设置相应页面的份数,则孩子会直接占满一行。
二、如果孩子的份数相加小于12,则会占不满整个.container的宽度,会有空白。12341234
三、如果孩子的份数相加大于12,则多的那一列会另起一行。1234
四、列嵌套:一个孩子里嵌套孩子1234
ab23
嵌套最好添加row,不但可以消除父盒子的padding影响,还能让子盒子继承父盒子的高度。下图为没添加row时的效果。
五、列偏移如果只有一个盒子且想要居中,则偏移(12-盒子的份数)/2左边右边
六、列排序 col-md-push-:推到右边。col-md-pull-:拉往左边我是中间的
七、响应式工具 让一个盒子在小屏幕时隐藏左边想去右侧右边想去左侧
124
转载地址:https://blog.csdn.net/zx2014567296/article/details/117404022 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月23日 06时26分15秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
JAVA笔记(二)--Java初始
2019-04-29
JAVA笔记(三)--变量及运算符
2019-04-29
JAVA笔记(四)--三大结构语句
2019-04-29
JAVA语言基础(五)--数组
2019-04-29
JAVA项目案例详解带代码
2019-04-29
JAVA九种排序算法详解
2019-04-29
JAVA笔记(六)面向对象--类和对象
2019-04-29
JAVA笔记(十一)面向对象--多态
2019-04-29
webpack打包错误:Invalid configuration object. Webpack has been initialised using a configuration object
2019-04-29
TypeError: this.getOptions is not a function
2019-04-29
el-table 二维数组合并行
2019-04-29
js获取当月的天数
2019-04-29
多个相邻的盒子外边框合并的问题
2019-04-29
js实现复制功能
2019-04-29
UR5e机械臂运行一直阻塞在waitForServer
2019-04-29
ROS把pkg1下的某个头文件和源文件生成动态链接库供pkg2调用
2019-04-29
使用urdf_tutorial快速可视化urdf文件
2019-04-29
SQl 数据完整性(随堂博客)
2019-04-29
左连接、右连接、内连接
2019-04-29