一、响应式布局概念

1.1 什么是响应式布局

 响应式布局1.网页可以根据不同的设备或窗口大小呈现出不同的效果2.使用响应式布局可以使一个网页适配所有设备3.响应式布局的关键就是媒体查询4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。

1.2 响应式布局和移动端网页的区别

响应式布局和移动端网页的区别：1、响应式布局可以通过一个网页适用于所有的设备。2.移动端网页是专门为移动端设备开发的网页。

1.3 响应式布局案例

     响应式布局案例：1.jquery官网。2.美团官网

二、响应式布局实现（媒体查询）

media媒体查询语法: @media 查询规则{  css-code }

2.1 媒体类型(mediatype)

+++ 媒体查询一共有四种类型。all     默认值，所有设备（可省略不写）print   打印设备(用于打印机和打印预览)screen  用于电脑屏幕，平板电脑，智能手机等speech  应用于屏幕阅读器等发声设备+++ 注意事项 1) 媒体类型之间使用【,】连接，表示或。@media all{ }    在所有设备    @media print ,screen { } 使用逗号连接多个设备类型。表示或。2) 在媒体类型前添加only,表示只有。only的使用主要是为了兼容一些老版本的浏览器。 3)在媒体类型前面添加not,表示非。4)切记not、only只能有一个
1） 媒体查询一共有四种类型，为不同设备分别指定样式
/** 支持所有设备 */@media   all {body{background-color: red;}}/** 支持所有带屏幕的设备 */@media screen {body{background-color: pink;}           }/** 支持打印设备 */@media  print{body{background-color: pink;}           }/** 支持阅读设备 */@media speech {body{background-color: pink;}           }
2） 媒体类型之间使用【，】连接。表示或
       /** 支持所有带屏幕的设备或支持打印设备 */@media screen , print {body{background-color: pink;}           }
3）在媒体类型前添加not，表示非
 @media    not    all  {body{background-color: pink;}           }
4）在媒体类型前添加only，表示只有（作用：兼容老版本）
 /** 表示只支持屏幕的。兼容老版本浏览器 */@media only screen   {body{background-color: pink;}           }

2.2 媒体特性

 媒体特性有许多，这里只演示这几个比较重要的特性:width      视口的宽度min-width  视口的最小宽度   (视口大于指定宽度时生效)max-width  视口的最大宽度   (视口小于指定宽度时生效)height 视口的高度         min-height 视口的最小高度max-height 视口的最大高度(一般不考虑视口的高度，所以这三个属性不重要)
1) 指定视口宽度媒体特性，表示视口符合这个条件时，才会使用该样式
     1.指定视口宽度,只有视口符合该条件时，才会使用该样式。@media (width:500px) {body{background-color: pink;}           }
>>>>>> width:500px 视口宽度只有等于这个值时，才会使用该样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/** 视口=500px时,使用该样式*/@media    (width:500px) {body{background-color: pink;}           }</style>
</head>
<body></body>
</html>


>>>>>> min-width:500px 视口宽度只有大于这个值时，才会使用该样式
       /** 视口=500px时,使用该样式*/@media    (min-width:500px) {body{background-color: pink;}           }


>>>>>> max-width:500px 视口宽度只有小于这个值时，才会使用该样式
    @media    (max-width:500px) {body{background-color: pink;}           }


2) 媒体特性之间可以使用【not】 、【and】、【，】
     not:表示非and:表示与,:  表示或
>>>>>> 【，】表示或
 +++ 视口<300 或 视口>500 ,使用该属性@media  (max-width:300px) ,(min-width:500px){body{background-color: pink;}           }
>>>>>> 【and】表示与
 +++ 300 < 视口 < 500,使用该属性@media (min-width:300px) and (max-width:500px) {body{background-color: pink;}           }
3) 响应式布局断点

样式切换的分界点，我们称其为断点，也就是网页的样式在这一点时发生变化。

             每一种响应式布局，都会有这样的断点。一般比较常用的断点：<768   超小屏幕，一般是手机  max-width=768px>768      小屏幕           min-width=768px>992   中型屏幕（一般为pad） min-width=992px>1200  电脑屏幕           min-width=1200px

2.3 媒体查询总结

 @media  [not/only]  媒体类型   媒体特性{  css-code }@media   媒体特性{  css-code }
>>>>>> 媒体类型之间只能用【，】连接
     @media   all, screen and(width:200px)  {body{background-color: pink;}           }
>>>>>> not、only只能出现在媒体类型前面
  表示非所有设备。@media   not all and(width:200px)  {body{background-color: pink;}           }

      @media   only all and(width:200px)  {body{background-color: pink;}           }
>>>>>> 媒体类型与媒体特性之间或媒体特性之间只能用【and】【，】连接
    @media    all ,screen and(width:200px)  {body{background-color: pink;}           }

@media    all ,screen and(width:200px) and(max-width:500px)  {body{background-color: pink;}           }
>>>>>> 如果没有媒体类型，则媒体类型默认为all
    @media  (width:200px) and(max-width:500px)  {body{background-color: pink;}           }

十六、响应式布局--媒体查询相关推荐

  1. html响应式布局的概念,HTMLCSS学习笔记（十八）响应式布局概念

    原标题:HTMLCSS学习笔记(十八)响应式布局概念 常见的布局方案 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸: 可切换的固定布局:同样以像素作为页面单位,参考主流 ...

  2. css学习12：过渡、变化、动画、响应式布局

    元素的动效 二十二.过渡 transition 在英文中是过渡的意思,过渡可以为一个元素在不同状态之间切换不同的过渡效果.它由四个部分构成,分别是:过渡属性的名称,过渡需要的时间,过渡的方式和过渡的延 ...

  3. HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)

    文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...

  4. css3媒体查询实现网站响应式布局

    响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...

  5. CSS3 @media媒体查询 适配不同尺寸设备的响应式布局（清晰详解）

    随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...

  6. html响应式布局_媒体查询

    html响应式布局_媒体查询 1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件 <link href="styl1.css" type="text/c ...

  7. 媒体查询-响应式布局-BFC

    媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局 设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...

  8. (day16)媒体查询和响应式布局

    1.媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的 ...

  9. 前端学习第16天：媒体查询-响应式布局

    第16天 1.媒体查询 ​ 说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒 ...

  10. 响应式布局之媒体查询

    媒体查询主要是对各种移动端设备的一个响应式兼容,可以在 @media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要 ...

最新文章

  1. 之前遇到一位老面试官，问我的问题真的有点东西
  2. gps卫星位置计算程序matlab_卫星空间大地测量中GPS周跳探测的四种方法
  3. memcached全面剖析--3.memcached的删除机制和发展方向
  4. JSON字符串与JSON对象的区别
  5. 3.21日 爬虫小计
  6. rand.nextint()
  7. java入栈_java中代码块的执行，也会有入栈的步骤吗？
  8. SOA：服务需要加以区别保持差异性吗？
  9. Gartner发布2011十大关键技术
  10. 协程 eventlet
  11. 全球最大语音识别公司Nuance的衰落与自我救赎
  12. cesium 圆形波纹
  13. 四、全卷积网络FCN详细讲解（超级详细哦）
  14. 抽象工厂模式类图及代码示例
  15. 马斯洛提出动机理论_马斯洛的需要层次理论
  16. TransactionSystemException
  17. thing.js入门学习
  18. jvav是什么梗？jvav是什么？jvav史上最牛语言
  19. LeetCode题解 Day1数组的遍历
  20. SCI期刊名缩写查询

热门文章

  1. word文件做一半未响应_Word经常出现未响应怎么办？
  2. 局域网DNS劫持，输入网址会跳转到其他的广告页
  3. 计算机声卡驱动程序,教大家如何安装声卡驱动【详细步骤】
  4. rollup打包压缩和去除注释等无效代码
  5. 555定时器组成的应用之流水灯
  6. 微信聊天记录导出为电脑txt文件教程
  7. 计算机无法安装cad怎么办,安装cad时电脑提示已经安装怎么办 cad无法安装的解决方法...
  8. 增强学习训练AI玩游戏
  9. php过滤文本中的手机号，座机号，qq，邮箱地址
  10. hunnu 10246 最大间隙问题 桶排序+抽屉原理