发表于： 2021-08-09 20:13:45
1 734
今天完成的事情：
看了任务九点资料，提交了任务九。
明天计划的事情：
明天开始看任务十的学习资料。
遇到的问题：
目前没有。
收获：
一、如何使用bootstrap栅格系统？
1.背景介绍
1什么是boostrap？
Bootstrap，来自 Twitter，是如今最流行的前端框架之一。是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
1.1 boostrap版本有哪些？区别
bootstrap4它的源码是采用 Sass 语言编写的
使用flex的布局方式
全部使用了rem为单位（除了部分的margin和padding使用px）
Bootstrap 4 共有5种栅格类，
依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)
偏移列通过 offset- 类来设置，
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
bootstrap3使用float的布局方式
bootstrap3 共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)
bootstrap3里面使用push和pull向左和向右移动
2.知识剖析
2什么是栅格系统？
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
2.1使用原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。
2.2使用规则
① 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。【container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐】
② 行(.row)是列(.col-*)的横向组合和父容器(
③ 呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素
④.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。
⑤.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
⑥五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。
3.常见问题
1、 就是没有引入、没有引入正确、没有下载bootstrap.min.css！！！
2、 如何设置5列占满宽度？
3、Bootstrap栅格布局的响应式如何实现？
解决方案：
1、使用 Bootstrap CDN嵌入4行代码就能完成导入！1行css 3行js.
2、每列设置宽度20%,也就是100%除以列数。
3、利用列重置，列偏移。 在通过给col附加不同的class前缀，以此对应不同的屏幕下，内容的宽度。
5.扩展思考
5.1什么是移动设备优先
Bootstrap的基础CSS代码默认从小屏幕设备（比如移动设备、平板电脑）开始，然后使用媒体查询扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
5.2为什么是12列？
因为3列布局更常见，之前是16列，但是为了更容易排出3列，后来改成12列。
5.3bootstrap有哪些常用的组件
目前常用的bootstrap组件：轮播图、下拉菜单、响应式导航栏
5.4什么是组件
组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。
5.5 Bootstrap 有哪些缺点？
1、Bootstrap 自带的样式权值很高，在开发中需要大量的代码用于覆盖原有样式。
2、不兼容IE8以下浏览器,有兼容需求的就不能使用bootstrap了。
二、媒体查询如何使用？
1. 背景介绍
媒体查询是针对不同的屏幕尺寸设置不同的样式而出现的，特别是你需要设置设计响应式的页面，媒体查询是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
2. 知识剖析
@media 媒体类型and （媒体特性）{你的样式}
注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：
(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
3. 常见问题
max-width与min-width的使用：
“min-width”指的是媒体类型大于或等于指定宽度时，样式生效。
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于 或等于指定的宽度时，样式生效。
在使用min-width的时候会有什么问题？
使用多个min-widht的时候，小点分辨率的媒体查询会覆盖掉大一点的媒体查询，例如：
在992px下背景色是灰色，768px下背景色是红色，但是只会生效768px下的效果
三、响应式的优点与缺点？
1.背景介绍
随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经大大提升。
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了。
2.知识剖析
2.1什么是响应式
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
2.2响应式的优点
1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。
2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上
3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
2.3响应式的缺点
1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。
2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；
3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。
3.常见问题
如何实现响应式?
4.解决方案
1.流式布局
用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位.
这些相对长度多用于网格，诸如宽度，间距或是留白等属性。
为了更好的控制流式布局，可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。
vw:视窗宽度;vh:视窗高度;vmin:视窗最小尺寸;vmax:视窗最大尺寸;
2.媒体查询 MediaQuery
自动探测屏幕宽度，然后加载相应的CSS样式,为目标设备提供有针对性的样式，在响应式设计中发挥作用。
@media all and (min-width: 800px) and (max-width: 1024px) {...}
在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。
3.viewport
meta name="viewport" content="width=device-width, initial-scale=1.0"
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
4.流式媒体
当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。
通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放。
img, video, canvas{
max-width: 100%;
}
四、html单选样式的更换
返回列表
评论