浏览器现状
PC端常见浏览器
360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
兼容移动端主流浏览器，处理Webkit内核浏览器即可
视口
视口（ viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
- iOS, Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口visual viewport
- 字面意思，它是用户正在看到的网站的区域。注意∶是网站的区域。
- 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添写meta视口标签通知浏览器操作
- meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽
meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放,yes或no ( 1或0) |
标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
二倍图
物理像素（分辨率）&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750* 1334
- 开发时候的1px不是一定等于1个物理像素的
- PC端页面。1个px等于1个物理像素的,但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
例如：iphone8的物理像素比为2，1px=两个物理像素，宽度为375px ，物理像素比越大，屏幕越清晰
PC端同像素的盒子到移动端就会被放大物理像素比倍，所以会出现失真问题
假如我们将一个50*50的图片直接放置移动端（iPhone），图片会被放大2倍，就会模糊
若放一个100*100的图片，手动将其缩小至50*50，将其放在移动端图片就会正常显示，故我们准备的图片如果比我们实际所需要的大小大2倍，这就是2倍图
背景缩放 background-size
background-size 属性规定背景图像的尺寸
background-size:背景图片宽度背景图片高度;
- 单位:长度|百分比l cover l contain;
- cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。等比例放大使其全部覆盖，图片可能展示不全
- contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，等比例放大，当宽度或高度一方占满时，就停止，可能有空白区域
<style>
div {
width: 500px;
height: 200px;
border: 2px solid red;
background: url(../img/m10.jpg) no-repeat;
/* background-size:宽度 高度； */
/* background-size: 500px 200px; */
/* 只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
/* background-size: 500px; */
/* 单位也可以的是百分比 相对于父盒子的 */
/* 即为图片宽度为父盒子的一半，高度等比例缩放 */
/* background-size: 50%; */
/* cover */
background-size: cover;
/* contain */
/* background-size: contain; */
}
</style>
<body>
<div></div>
</body>cover
contain
通过background-size可实现背景图的缩放效果，当要在移动端展示背景图时，可先准备一个二倍的图片，再利用背景图缩放一半，移动端上显示的背景图不会失真
移动端开发选择
1.单独制作移动端页面（主流)
通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
例：京东商城手机版，淘宝触屏版，苏宁易购手机版
2.响应式页面兼容移动端(其次)
页面的宽度随着网页的大小而变化，制作麻烦，考虑兼容性问题
例：三星手机官网
移动端技术解决方案
移动端浏览器
- 移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。
- 我们可以放心使用H5标签和CSS3样式。
- 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
CSS初始化 normalize.css
移动端CSS初始化推荐使用normalize.css/
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的bug
- Normalize.css:是模块化的
- Normalize.css:拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
特殊样式
/*css3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent ;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动端常见布局
移动端技术选型
移动端布局和以前学习的PC端有所区别:
1.单独制作移动端页面(主流)
flex弹性布局（强烈推荐)
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差
- IE11或更低版本，不支持或仅部分支持
flex布局原理
flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
- 当为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素，称为Flex容器 ( flex container )，简称"容器”。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目”
子容器可以横向排列也可以纵向排列
总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
flex-direction :设置主轴的方向
1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，垂直向下
2.属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意︰主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而子元素是跟着主轴来排列的
属性值 说明 row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上
<style> div { /* 给父级添加flex属性 */ display: flex; width: 800px; height: 300px; background-color: pink; /* 默认的主轴为row 从左到右 x轴 行 所以y轴就是侧轴*/ /* 元素是根据主轴排列的 */ flex-direction: row; } div span { width: 150px; height: 100px; background-color: aliceblue; } </style> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body>
row-reverse
column
justify-content :设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 说明 flex-start 默认值从头部开始如果主轴是x轴，则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐(如果主轴是x轴则水平居中) space-around 平分剩余空间(父亲定宽时使用) space-between 先两边贴边再平分剩余空间(重要) <style> div { /* 给父级添加flex属性 */ display: flex; width: 800px; height: 300px; background-color: pink; /* 默认的主轴为row 从左到右 x轴 行 */ flex-direction: row; /* justify-content: 是设置主轴上子元素的排列方式;*/ /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* 让子元素居中对齐 */ justify-content: center; } div span { width: 150px; height: 100px; background-color: aliceblue; } </style> <body> <div><span>1</span> <span>2</span> <span>3</span> </div> </body>center
flex-end
space-around
space-between
当主轴在y轴上时同理
<style> div { /* 给父级添加flex属性 */ display: flex; width: 800px; height: 800px; background-color: pink; flex-direction: column; /* justify-content: 是设置主轴上子元素的排列方式;*/ /* justify-content: flex-start; */ justify-content: flex-end; /* 让子元素居中对齐 */ justify-content: center; /* justify-content: space-around; */ /* justify-content: space-between; */ } div span { width: 150px; height: 100px; background-color: aliceblue; } </style> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body>
以上就实现了垂直居中的排列方式
flex-wrap :设置子元素是否换行
flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
属性值 说明 nowrap 默认值，不换行 wrap 换行
align-content :设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头，再平分剩余空间 stretch 设置子项元素高度平分父元素高度 <style> div { display: flex; width: 800px; height: 400px; background-color: pink; /* 换行 */ flex-wrap: wrap; /* 因为有了换行,此时侧轴上控制子元素的对齐方式用align-content */ align-content: flex-start; } div span { width: 150px; height: 100px; background-color: aqua; color: #fff; margin: 10px; } </style> <body> <div><span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body>flex-start
center
space-around
space-between
align-items :设置侧轴上的子元素排列方式(单行)
该属性控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） stretch 拉伸（默认值） <style> div { display: flex; width: 800px; height: 800px; background-color: pink; /* 默认主轴为x轴 row */ flex-direction: row; justify-content: center; /* 侧轴居中 */ align-items: center; } div span { width: 150px; height: 100px; color: #fff; margin: 10px; background-color: aquamarine; } </style> </head> <body> <div><span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body>
stretch
拉伸时子元素不要给高度，此时子元素与父元素的高度相同
若主轴为y轴，则设置justify-content:center;align-content:center;会是以下效果
align-content和align-items区别
- align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
- align-content适应于换行(多行)的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找align-content
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
<style> div { display: flex; width: 600px; height: 300px; background-color: pink; flex-direction: column; flex-wrap: wrap; /* 把设置主轴方向和是否换行(换列)简写 */ flex-flow: column wrap; } div span { width: 150px; height: 100px; background-color: aquamarine; color: #fff; } </style> <body> <div><span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </body>
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端有很好的布局
建议︰
1.如果是PC端页面布局，最好用传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局
flex布局子项常见属性
-
flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
.item {
flex: <number>; /* default 0*/
}左右固定，中间区域自适应方法：
1.左右用固定实现，中间宽度百分百之后设置左右marign即可
2.使用flex属性，给左右两个盒子定宽，中间盒子设置flex:1;这样中间盒子就会把父盒子剩余空间全占，第二个盒子整份全部占据剩下位置，这样中间盒子就会实现自适应的效果。
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: aqua;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: bisque;
}
section div:nth-child(2) {
flex: 1;
background-color: antiquewhite;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: bisque;
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
将父元素分为三等份
将子元素均设为flex:1;子元素会平分父元素（子元素不设宽度）
以下代码相当于将父元素平分为3份，三个子元素各占一份
<style>
p {
display: flex;
width: 60%;
height: 150px;
background-color: aqua;
margin: 0 auto;
}
p span {
flex: 1;
}
</style>
<body>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body> 
某个子元素占的较多，比如其中一个子元素占据区域为其他元素的二倍
相当于将父元素平均分为四份，第二个span占两份，其余占一份。
<style>
p {
display: flex;
width: 60%;
height: 150px;
background-color: aqua;
margin: 0 auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
background-color: blue;
flex: 2;
}
</style>
<body>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body> 
-
align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个盒子沿着侧轴底侧对齐 */
/* align-items: flex-end; */
/* 若只让第三个盒子在底侧 */
}
div span {
width: 150px;
height: 100px;
background-color: antiquewhite;
margin-right: 5px;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<div><span></span><span></span><span></span></div>
</body> 
-
order属性定义子项的排列顺序(前后顺序)
数值越小，排列越靠前，默认为0。注意:和z-index不一样。
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个盒子沿着侧轴底侧对齐 */
/* align-items: flex-end; */
/* 若只让第三个盒子在底侧 */
}
div span {
width: 150px;
height: 100px;
background-color: antiquewhite;
margin-right: 5px;
}
div span:nth-child(2) {
order: -1;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<div><span>1</span><span>2</span><span>3</span></div>
</body> 
流式布局(百分比布局) 自由伸缩
- 流式布局，就是百分比布局，也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度(max-height 最大高度)
- min-width 最小宽度(min-height 最小高度)
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
}
section div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: antiquewhite;
}
section div:nth-child(2) {
background-color: aquamarine;
}
</style>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
less+rem+媒体查询布局
rem基础
rem单位
- rem(root em)是一个相对单位，类似于em，em是父元素字体大小。
- 不同的是rem的基准是相对于html元素的字体大小。
- 比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。
rem优点：可以通过修改html里面的文字大小来改变页面中元素的大小 ，实现整体控制
媒体查询
媒体查询(Media Query )是CSS3新语法。
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
语法规范
@media mediatype and l not l only (media feature) {
CSS-Code ;}
- 用@media开头注意@符号
- mediatype 媒体类型
- 关键字and not only
- media feature 媒体特性 必须有小括号包含
mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕、平板电脑、智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到─起做为媒体查询的条件。
- and :可以将多个媒体特性连接到一起，相当于“且”的意思
- not :排除某个媒体类型，相当于“非”的意思，可以省略。
- only :指定某个特定的媒体类型，可以省略。
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。注意他们要加小括号包含
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
<style>
/* 在屏幕上 并且 最大的宽度是800px 设置想要的样式 */
/* max-width小于等于800px */
@media screen and (max-width:800px) {
body {
/* 当屏幕宽度小于等于800px时，屏幕为粉色，大于则不是 */
background-color: pink;
}
}
@media screen and (max-width:500px) {
body {
/* 当屏幕宽度小于500px时，背景颜色变为bisque色 */
background-color: bisque;
}
}
</style>
<body>
</body>大于等于540px，小于660px
@media screen and (min-width:540px) and (max-width:659px) {
body {
background-color:green;
}
}媒体查询可以根据不同的屏幕尺寸改变不同的样式
媒体查询+rem实现元素动态大小变化
- rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets (样式表)。原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法规范
<link rel="stylesheet" media="mediatype and/not/only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
Less基础
维护css的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE( 作用域）等概念。
- cSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
Less ( Leaner Style Sheets 的缩写）是一门CSS扩展语言，也称为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin(混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址 : http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus
Less使用
首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。
Less变量
变量是指没有固定的值，可以改变的。
@变量名:值;
变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
Less编译
- 本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
- 所以，我们需要把less文件，编译生成为css文件，这样html页面才能使用。
- Easy LESS插件用来把less文件编译为css文件
- 安装完毕插件，重新加载下vscode。只要保存一下Less文件，会自动生成CSS文件。
Less嵌套
// 子元素的样式直接写到父元素里面 .header { width: 200px; a { color: red; } }a { color: red; // 伪类选择器 &:hover { color: green; } // 伪元素选择器 &::before { content: ""; } }
Less运算
注意:
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
rem实际开发适配方案
一、 less+rem+媒体查询
动态设置 html标签 font-size 大小
- 假设设计稿是750px
- 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
- 每一份作为html字体大小，这里就是50px
- 那么在320px设备的时候，字体大小为320/15就是 21.33px
- 用页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
- 比如我们以 750为标准设计稿
- 一个100*100像素的页面元素在 750屏幕下,就是100/50转换为rem是2rem*2rem 比例是1比1
- 320屏幕下，htm字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
元素大小取值方法
- 最后的公式:页面元素的rem值=页面元素值( px )/(屏幕宽度/划分的份数)
- 屏幕宽度/划分的份数就是html font-size的大小
- 或者:页面元素的rem值=页面元素值( px ) / html font-size字体大小
二 、简洁高效的flexible.js
手机淘宝团队出的简洁高效移动端适配库
再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么只需要把html文字大小设置为75px(750px/10)就可以里面页面元素rem值:页面元素的px值/75
剩余的，让flexible.js来去算
cssrem插件可自动将px转化为rem，使用前记得先修改Root Font Size为页面所需宽度的十分之一
如果页面超过750px，就通过媒体查询强制性将html文字改为75p
2.响应式页面兼容移动端（其次)
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时响应式尺寸划分
- 超小屏幕（手机，小于768px):设置宽度为100%
- 小屏幕(平板，大于等于768px):设置宽度为750px
- 中等屏幕(桌面显示器，大于等于992px ):宽度设置为970px
- 大屏幕(大桌面显示器，大于等于1200px):宽度设置为1170px
宽度比设备宽度小一点目的是为了让两边有空隙，实现居中对齐，视觉效果会更好
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1.超小屏幕下 小于768 布局容器的宽度为 100% */
@media screen and (max-width:767px) {
.container {
width: 100%;
}
}
/* 2.小屏幕下 大于等于768 布局容器改为750px */
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于992px 布局容器改为970px */
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器改为1170px */
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
</style>
<body>
<div class="container"></div>
</body>响应式导航
- 当我们屏幕大于等于768像素，我们给布局容器container宽度为750px。
- container里面包含8个小li 盒子，每个盒子的宽度定为93.75px ( 750/8)，高度为30px，浮动一行显示
- 当我们屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度。
- 此时里面的8个小li，宽度修改为33.33%，这样一行就只能显示3个小li，剩余下行显示。
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
@media screen and (max-width:767px) {
.container {
width: 100%;
}
.container li {
width: 33.33%;
}
}
</style>
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body> 
Bootstrap前端开发框架
Bootstrap来自Twitter(推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
框架∶顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点
- 标准化的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自已的生态圈，不断的更新迭代
- 让开发更简单，提高了开发的效率
bootstrap的使用
Bootstrap使用四步曲∶
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
2.创建html骨架结构
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置:视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0">
<!-- [if lt IE9]>
解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题
<script src="https: //oss.maxcdn. com/html5shiv/3.7.2/htm15shiv.min.js"></script>
解决ie9以下浏览器对css3 Media Query的不识别
<script src="https: //oss.maxcdn. com/respond/1.4.2/respond.min.js"></script>
<![endif] -->布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container它提供了两个作此用处的类。
1.container类
- 响应式布局的容器固定宽度
- 大屏(>=1200px)宽度定为1170px
- 中屏( >=992px)宽度定为970px
- 小屏(>=768px)宽度定为750px.
- 超小屏（100%)
2.container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口( viewport )的容器。
- 适合于单独做移动端开发
Bootstrap 栅格系统
栅格系统简介
栅格系统英文为“gridsystems”,也有人翻译为“网格系统”，它是指将页面布局（rem是将整个设备宽度划分）划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口( viewport )尺寸的增加，系统会自动分为最多12列。
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，再把container划分为12等份
栅格选项参数
栅格系统用于通过一系列的行( row )与列( column )的组合来创建页面布局，内容就可以放入这些创建好的布局中。
| 超小屏幕(手机) <768px | 小屏设备（平板) >=768px | 中等屏幕(桌面显示器) >=992px | 宽屏设备(大桌面显示器) >=1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs-份数 | .col-sm-份数 | .col-md-份数 | .col-lg-份数 |
| 列( column)数 | 12 | |||
- 行( row )必须放到container布局容器里面
- 我们实现列的平均划分需要给列添加类前缀
- xs-extra small :超小; sm-small : 小; md-medium :中等;lg-large :大;
- 列( column )大于12，多余的“列( column )”所在的元素将被作为一个整体另起一行排列
- 每—列默认有左右15像素的padding
- 可以同时为一列指定多个设备的类名，以便划分不同份数例如class="col-md-4 col-sm-6"
- 若类前缀为.col-sm-4,则比小屏设备包括小屏设备宽的设备均为该份数（除了样式层叠）
<style>
[class^="col"] {
border: 1px solid #000;
}
.container .row:nth-child(1) {
background-color: bisque;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-lg-3 col-xs-12">1</div>
<div class="col-md-4 col-sm-6 col-lg-3 col-xs-12">2</div>
<div class="col-md-4 col-sm-6 col-lg-3 col-xs-12">3</div>
<div class="col-md-4 col-sm-6 col-lg-3 col-xs-12">4</div>
</div>
<!-- 如果孩子的份数相加等于12 则孩子能占满整个container的宽度 -->
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
</div>
<!-- 如果孩子的份数相加小于12 则占不满整个container的宽度 -->
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-1">4</div>
</div>
<!-- 如果孩子的份数相加大于12 多余的那一列会换行显示-->
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-3">4</div>
</div>
</div>
</body>记得先引入bootstrap相关css文件
宽屏设备
中等屏幕
小屏
超小屏幕
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
<style>
.row div {
height: 50px;
background-color: aqua;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 列嵌套最好加一个row 这样可以取消父元素的padding值 而且高度自动和父亲一样 -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距( margin ) 。
偏移份数和左侧以及右侧总和为12，偏移的份数就是12-两个盒子的份数
<style>
.row div {
height: 50px;
background-color: rgba(250, 235, 215, 0.687);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<!-- 如果是一个盒子 12-盒子份数再除以2 -->
<div class="row">
<div class="col-md-8 col-md-2">中间盒子</div>
</div>
</div>
</body>
列排序
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列 ( column )的顺序。
<style>
.row div {
height: 50px;
background-color: antiquewhite;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</body> 
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的，是visible-xs visible-sm visible-md visible-lg是显示某个页面内容，但在其他宽度下不显示
vw/vh
- 相对单位
- 相对视口的尺寸计算结果
- vw:viewport width,1vw=1/100视口宽度
- vh:viewport height,1vh=1/100视口高度
vw适配原理
vw单位尺寸
1．确定设计稿对应的vw尺寸( 1/100视口宽度)
2. vw单位的尺寸= px单位数值/( 1/100视口宽度）
百分比相对于父盒子，vw相对于视口
vmin/vmax
vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关取决于哪个更大和更小
可滑动的导航栏案例
<style> body { width: 375px; margin: 0 auto; } .tabs { display: flex; justify-content: space-between; flex: 1; background-color: aqua; } .tab-list { display: flex; overflow: hidden; } .after { width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #fff; } a { color: #fff; text-decoration: none; padding: 0 16px; /* 不需要文字换行 */ white-space: nowrap; } </style> <body> <div class="tabs"> <!-- 很宽的盒子 --> <div class="tab-list"> <a href="">首页</a> <a href="">动画</a> <a href="">番剧</a> <a href="">果蔬</a> <a href="">音乐</a> <a href="">舞蹈</a> <a href="">鬼畜</a> <a href=""></a> </div> <div class="after"> <i class="iconfont icon-xiajiantou"></i> </div> </div> </body>
之后利用js实现水平平移即可
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
