前端移动web-day04学习笔记
原创
01-响应式布局与媒体查询
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，ipad,PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 ： @media(min-width:1200px){ css样式 }
设备尺寸<=区间 ： @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
（1）先写1200px的默认样式 （响应式布局以PC端为准）
（2）使用媒体查询根据设备尺寸覆盖默认样式
1.1-响应式布局介绍
1.响应式布局：一个页面适配多个不同终端（pc、移动端、平板端）
2.响应式布局核心原理：根据不同的屏幕尺寸加载不同的样式- 25个经典的响应式布局网站:http://www.daqianduan.com/4614.html?tdsourcetag=s_pcqq_aiomsg
- 国内最经典的响应式布局网站：http://www.bootcss.com/
- bootstrap是国内一流的响应式布局框架
- bootstrap是国内一流的响应式布局框架
3.响应式布局的优缺点及适用场景- 优缺点
- 优点：
全适配:可以制作全适配的网页，就是一个网页可以同时适配PC端和移动端，而不同写两套页面。 - 缺点：
不便于维护:需要写大量的css代码，相当于把PC端和移动端的css代码写到一个文件中，然后根据屏幕尺寸加载对应的代码。
- 适用场景
- 适合：
网页结构简单:通常是专题类网站，例如一些播客专题类https://www.csdn.net/，技术专题类http://www.bootcss.com/ - 不适合：
网页结构复杂:比如电商类(京东、淘宝、天猫)，这些网站由于结构很复杂，使用响应式开发维护起来特别麻烦，反而是做两套页面分别适配PC端与移动端更方便
- 如何区分一个网站是否使用了响应式布局：
谷歌控制台切换到移动端，然后刷新网页- 如果PC端和移动端网址一样：说明使用了响应式布局
- 如果PC端和移动端网址不一样：说明没有使用响应式布局，而是做两套页面匹配PC端和移动端
- 优点：
全适配:可以制作全适配的网页，就是一个网页可以同时适配PC端和移动端，而不同写两套页面。 - 缺点：
不便于维护:需要写大量的css代码，相当于把PC端和移动端的css代码写到一个文件中，然后根据屏幕尺寸加载对应的代码。
- 适合：
网页结构简单:通常是专题类网站，例如一些播客专题类https://www.csdn.net/，技术专题类http://www.bootcss.com/ - 不适合：
网页结构复杂:比如电商类(京东、淘宝、天猫)，这些网站由于结构很复杂，使用响应式开发维护起来特别麻烦，反而是做两套页面分别适配PC端与移动端更方便
谷歌控制台切换到移动端，然后刷新网页- 如果PC端和移动端网址一样：说明使用了响应式布局
- 如果PC端和移动端网址不一样：说明没有使用响应式布局，而是做两套页面匹配PC端和移动端
1.2媒体查询
1.作用：媒体查询@media是css3中新增的功能，它的作用是可以针对不同的媒体类型定义不同的样式
2.语法： @media 媒体类型 and (媒体特征){ css样式代码 }- 例如：
@media screen and (width:700px){ css样式代码}- 意思： 如果屏幕的宽度是700px，就加载大括号里面的css样式
- 例如：
@media screen and (max-width:700px){ css样式代码}- 意思：如果屏幕的最大宽度不超过700px（言外之意就是屏幕宽度 <= 700px）,就加载大括号里面的css样式
- 例如：
@media screen and (min-width:1000px) and (max-width:1200px){ css样式代码}- 意思：如果屏幕宽度范围 在[1000到1200]之间，就加载大括号里面的样式
@media screen and (width:700px){ css样式代码}- 意思： 如果屏幕的宽度是700px，就加载大括号里面的css样式
@media screen and (max-width:700px){ css样式代码}- 意思：如果屏幕的最大宽度不超过700px（言外之意就是屏幕宽度 <= 700px）,就加载大括号里面的css样式
@media screen and (min-width:1000px) and (max-width:1200px){ css样式代码}- 意思：如果屏幕宽度范围 在[1000到1200]之间，就加载大括号里面的样式
3.语法注意点:==and左右两边的空格不能省略==- 媒体类型：具体可查询w3c文档，实际开发最最最常用的就是screen，表示屏幕
- all：所有设备
- print：打印设备，用于打印机以及打印预览
- screen：用于电脑，平板电脑，手机的屏幕
- 媒体特征：非常的多，但是常用的就下面这2个
max-width:宽度值- 意思：屏幕的宽度不超过设置的宽度值，也就是说 屏幕宽度 <= 宽度值
min-width:宽度值- 意思：屏幕的宽度不小于设置的宽度值，也就是说 屏幕宽度 >= 宽度值
- 如果不设置媒体类型，则默认为screen，所以上面的语法可以简写成
@media(max-width:700px){ css样式代码 }
- all：所有设备
- print：打印设备，用于打印机以及打印预览
- screen：用于电脑，平板电脑，手机的屏幕
max-width:宽度值- 意思：屏幕的宽度不超过设置的宽度值，也就是说 屏幕宽度 <= 宽度值
min-width:宽度值- 意思：屏幕的宽度不小于设置的宽度值，也就是说 屏幕宽度 >= 宽度值
@media(max-width:700px){ css样式代码 }
然后下午写了一个Bootstrap的响应式布局案例：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。