search

soonfy / issue-blog

blog using issue
0 stars 0 forks source link

css 媒体查询 #4

Open soonfy opened 6 years ago

soonfy commented 6 years ago

媒体查询

css2

css2 媒体查询针对媒体类型（显示器，便捷设备，电视机等）设置不同的样式规则；

css3

css3 取代查找媒体类型，根据设置自适应显示；

  1. viewport（视窗）的宽度与高度；
  2. 设备的宽度与高度；
  3. 朝向（智能手机横屏，竖屏）；
  4. 分辨率；

伪范式

media_query_list <media_query> [, <media_query>]

media_query [only | not]? <media_type> [and <expression>] expression [and <expression>]

media_type all, screen, print, speech

expression ( <media_feature> [: value]? )

media_feature width, min-width, max-width, height, min-height, max-height, device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height, aspect-ratio, min-aspect-ratio, max-aspect-ratio, device-aspect-ratio, min-device-aspect-ratio, max-device-max-ratio, color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome, resolution, min-resolution, max-resolution, orientation, scan, grid

实例

  1. link 元素中的 css 媒体查询；

    <link rel="stylesheet" media="screen and (max-width: 768px)" href="small.css" />

  2. 样式表中的 css 媒体查询；

    <style>
@media screen and (max-width: 768px) {
.info {
  display: none;
}
}
</style>

逻辑操作符

  1. and 合并多个媒体属性或者合并媒体属性与媒体类型；
  2. not 应用于整个媒体查询，最后否定查询结果；
  3. only 用于指定某种特定的媒体类型；
  4. ，逗号分隔媒体查询，并列媒体查询，每个媒体查询都是独立的；

媒体类型 media_type

  1. all 所有设备；
  2. screen 显示器，电脑屏幕，平板电脑，智能手机；
  3. print 用于打印机，打印预览；
  4. speech 屏幕阅读器等语音设备；

媒体功能 media_feature

  1. width 宽度 定义输出设备渲染区域的宽度（可视区域的宽度，打印机纸盒的宽度）； 接受 min， max 前缀

    @media screen and (min-width: 576px) and (max-width: 768px) { }

  2. height 高度 定义输出设备渲染区域的高度（可视区域的高度，打印机纸盒的高度）； 接受 min，max 前缀

    @media screen and (min-height: 420px) and (max-height: 570px) { }

  3. device-width 设备宽度 定义输出设备的宽度（整个屏幕或者页的高度）； 接受 min，max 前缀

    @media screen and (min-device-width: 568px) and (max-device-width: 768px) { }

  4. device-height 设备高度 定义输出设备的高度（整个屏幕或者页的高度）； 接受 min，max 前缀

    @media screen and (min-device-height: 420px) and (max-height: 570px) { }

  5. aspect-ratio 宽高比 定义输出设备渲染区域的宽高比。包含以 / 分隔的两个正整数，代表水平像素和垂直像素； 接受 min，max 前缀

    @media screen and (min-aspect: 1/1) { }

  6. device-aspect-ratio 设备宽高比 定义输出设备的宽高比。包含以 / 分隔的两个正整数，代表水平像素和垂直像素； 接受 min，max 前缀

    @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { }

  7. color 颜色 定义输出设备每个像素单元的比特值。如果不支持输出颜色，值为0； 接受 min，max 前缀

    @media all and (color) { }
@media all and (min-color: 4) { }

  8. color-index 颜色索引 定义输出设备中颜色查询表中的条目数量； 接受 min，max 前缀

    @media all and (color-index) { }
@media all and (min-color-index: 256) { }

  9. monochrome 黑白 定义黑白（灰度）设备每个像素的比特值。如果不是黑白设备，值为0； 接受 min，max 前缀

    @media all and (monochrome) { }
@media all and (min-monochrome: 8) { }

  10. resolution 分辨率 定义输出设备的分辨率（像素密度）。分辨率使用每英寸（dpi）或者每厘米（dpcm）； 接受 min，max 前缀

    @media print and (min-resolution: 300dpi) { }
@media screen and (min-resolution: 2dppx) { }

  11. orientation 方向 定义设备处于横屏模式（高度大于宽度）还是竖屏模式（宽度大于高度）； landscape 横屏模式，portrait 竖屏模式； 不接受 min，max 前缀

    @media all and (orientation: portrait) { }

  12. scan 扫描 定义电视输出设备的扫描过程； progressive 顺序方式，interlace 逆序方式； 不接受 min，max 前缀

    @media tv and (scan: progressive) { }

  13. grid 网格 定义输出设备是网格设备还是位图设备；网格设备值为1，否则为0； 不接受 min，max 前缀

    @media screen and (grid) and (max-width: 15em) { }

参考文章

css媒体查询

soonfy 2018-03-30

soonfy commented 6 years ago

css 媒体查询分割点

// small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }

// medium devices (tablets, 768px and up)
@media (min-width: 768px) { }

// large devices (desktops, 992px and up)
@media (min-width: 992px) { }

// extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }

参考文章

bootstrap layout

soonfy

soonfy commented 6 years ago

phone size

  1. iPhone 5: 320 x 568 | Dpr: 2

  2. iPhone 6: 375 x 667 | Dpr: 2

  3. iPhone 6 Plus: 414 x 736 | Dpr: 3

  4. iPhone 7: 375 x 667 | Dpr: 2

  5. iPhone 7 Plus: 414 x 736 | Dpr: 3

  6. iPhone X: 375 x 812 | Dpr: 3

soonfy