CSS 媒體查詢(any-hover any-pointer)

時間 2020-08-06

標籤 css 媒體查詢 hover pointer 欄目 CSS 简体版

原文原文鏈接

CSS 媒體查詢

媒體查詢爲不一樣設備之間作樣式的適配提供了很好的解決方式，也可以提供一些識別不一樣設備的方式。css

常規使用

媒體查詢能夠有如下三種使用方式：html

一、 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
二、 @import url(example.css) screen and (color);
三、 @media screen {
     * { font-family: sans-serif }
    }

媒體特性(經常使用)

width: (max-width、min-width) 適用於視覺和觸覺媒體類型，不能指定負值

如下媒體查詢例子表示該樣式表適用於視口（文件渲染的部分屏幕/紙張）寬度在400至700像素之間的設備：web

@media screen and (min-width: 400px) and (max-width: 700px) {
  ...
}

height: (max-height、min-height) 適用於視覺和觸覺媒體類型，不能指定負值

用法與width特性一致。瀏覽器

也許你會看到device-width和device-height這樣的媒體特性被使用，這二者更多的是表示設備的物理的寬高，標準文檔中指出，建議使用width或者height去作媒體沒查詢，實現更好的效果。安全

orientation (portrait(縱向)、landscape(橫向)) 適用於位圖媒體類型，表示設備的橫屏、豎屏

若height媒體特性的值大於width媒體特性的值，則orientation媒體特性爲portrait，不然orientation爲landscape。iphone

<!-- 豎屏設備 -->
@media all and (orientation:portrait) {
  ...
}
<!-- 橫屏設備 -->
@media all and (orientation:landscape) {
  ...
}

aspect-ratio 設備寬高比，定義爲width與height的比例。

<!-- 表示16/9設備屏幕 -->
@media screen and (aspect-ratio: 16/9) {
  ...
}

any-hover any-pointer

很是強大的功能，能夠間接判斷是不是觸摸設備。
好比any-hover判斷設備是否支持鼠標通過行爲。學習

any-hover

none: 沒有什麼輸入裝置能夠實現hover懸停，即沒有鼠標輸入設備優化

hover: 一個或多個輸入裝置能夠觸發元素的hover懸停交互，即支持鼠標設備url

適用場景：在移動端和PC端通用一個按鈕，須要給按鈕懸停效果，這是PC的hover就不適合移動端了，就能夠藉助any-hover來爲移動端作單獨的效果優化體驗。code

button {
    background-color: #fff;
}
button:active {
    background-color: #f0f0f0;
}
/* 兼容PC端： */
@media (any-hover: hover) { 
  button:hover {
    background-color: #f5f5f5;
  }
}