[email protected]@media screen进行响应式布局

了解Media Queries

Media Queries,其作用就是允许添加表达式用以媒体查询,以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。

[email protected],但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS,我们不去讨论。

[email protected] media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。

@[email protected] screen区别

@media screen的css在打印设备里是无效的,[email protected],如果css需要用在打印设备里,[email protected] ,否则,[email protected] screen。

不过这只是笼统的做法,其实如果把“screen”换为“print”,[email protected] print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效。

Media Queries工作方式:

在media属性里:

    ● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
    ● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
    ● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

1、种是直接在link中判断设备的尺寸,然后引用不同的css文件:

  1. <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

  1. <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

2、另一种方式,即是直接写在 style 标签里:

  1. @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  2.   .class {
  3.     background: #ccc;
  4.   }
  5. }

[email protected],其它跟link里的media属性相同。

Media使用说明举例

1、前端响应式布局最出名的框架莫过于 Bootstrap

下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,[email protected] (min-width: 768px)表示最小是768也就是>=768,这里有等于,[email protected] (max-width: 767px)这边表示<=767就不会有冲突了。

  1. /* 小屏幕(平板,大于等于 768px) */
  2. @media (min-width: @screen-sm-min) { ... }
  3.  
  4. /* 中等屏幕(桌面显示器,大于等于 992px) */
  5. @media (min-width: @screen-md-min) { ... }
  6.  
  7. /* 大屏幕(大桌面显示器,大于等于 1200px) */
  8. @media (min-width: @screen-lg-min) { ... }


2、自适应代码

  1. @media (min-width: 768px){ //>=768的设备 }
  2. @media (min-width: 992px){ //>=992的设备 }
  3. @media (min-width: 1200){ //>=1200的设备 }

注意下顺序[email protected] (min-width: 768px)写在了下面那么就是错误的!!!

  1. @media (min-width: 1200){ //>=1200的设备 }
  2. @media (min-width: 992px){ //>=992的设备 }
  3. @media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

  1. @media (max-width: 1199){ //<=1199的设备 }
  2. @media (max-width: 991px){ //<=991的设备 }
  3. @media (max-width: 767px){ //<=768的设备 }

3、高级的混合应用

  1.  @media screen and (min-width:1200px){} 
  2.  @media screen and (min-width: 960px) and (max-width: 1199px) {  }
  3.  @media screen and (min-width: 768px) and (max-width: 959px) {  }
  4.  @media only screen and (min-width: 480px) and (max-width: 767px){  } 
  5.  @media only screen and (max-width: 479px) {  }
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... } 
  3. /* Portrait tablet to landscape and desktop */
  4. @media (min-width: 768px) and (max-width: 979px) { ... } 
  5. /* Landscape phone to portrait tablet */
  6. @media (max-width: 767px) { ... } 
  7. /* Landscape phones and down */
  8. @media (max-width: 480px) { ... }

基于视窗宽度的媒体查询断点设置

前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt

  1. /*Viewport = 1920px*/
  2. @media screen and (max-width: 120em){}
  3. /*Viewport = 1680px*/
  4. @media screen and (max-width: 105em){}
  5. /*Viewport = 1400px*/
  6. @media screen and (max-width: 87.5em){}
  7. /*Viewport = 1200px*/
  8. @media screen and (max-width: 75em){}
  9. /*Viewport = 1024px*/
  10. @media screen and (max-width: 64em){}
  11. /*Viewport = 960px*/
  12. @media screen and (max-width: 60em){}
  13. /*Viewport = 800px*/
  14. @media screen and (max-width : 50em){}
  15. /*Viewport = 768px*/
  16. @media screen and (max-width : 48em){}
  17. /*Viewport = 600px*/
  18. @media screen and (max-width: 37.5em){}
  19. /*Viewport = 480px*/
  20. @media screen and (max-width: 30em){}
  21. /*Viewport = 320px*/
  22. @media screen and (max-width: 20em){}
  23. /*Viewport = 240px*/
  24. @media screen and (max-width: 15em){}
  25. /*
  26. High Resolution/Retina Display Media Queries
  27. */
  28. /*Pixel Density 3*/
  29. @media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
  30. /*Pixel Density 2*/
  31. @media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
  32. /*Pixel Density 1.5*/
  33. @media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
  34. /*Pixel Density 1.25*/
  35. @media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
  36. /*
  37. Printed Style Media Queries
  38. */
  39. /*Print Resolution 300 dpi*/
  40. @media print and (min-resolution: 300dpi){}
  41. /*Print Resolution 144 dpi*/
  42. @media print and (min-resolution:144dpi){}
  43. /*Print Resolution 96 dpi*/
  44. @media print and (min-resolution:96dpi){}
  45. /*Print Resolution 72 dpi*/
  46. @media print and (resolution:72dpi){}

发布日期:

所属分类: Css/Html5 标签: