css-媒體查詢

lwx12525 發布于2019-08-30 15:55 / 1437人閱讀

摘要：媒體查詢標簽像素比像素比物理像素設備獨立像素像素通常的設計稿檢測像素比設計稿設備寬度設置該設備下的根元素的文字大小改變窗口大小時也要重新計算一次比如由豎屏切換到橫屏相對于根元素字體的單位是根據父元素字體移動端必須加的東西視口可視寬度物理

媒體查詢

標簽:css
[TOC]

像素比

像素比 = 物理像素/設備獨立像素(css像素)
window.devicePixelRatio
通常的設計稿pad
iphone5 640   320(css) 2/1
iphone 750 375
iphone 1242 414

//檢測像素比
          // 設計稿
      var desW = 640; // 100px
      function refreshRem() {
          // 設備寬度(css)
          var winW = document.documentElement.clientWidth;
          document.documentElement.style.fontSize = 100/(desW/winW) + "px";//設置該設備下的根元素html的文字大小
          //   x= winW/desW*100
      }
      refreshRem();
      //         改變窗口大小時也要重新計算一次 比如由豎屏切換到橫屏
      window.addEventListener("resize", refreshRem);

rem（root-rm）

相對于根元素字體的單位
em是根據父元素字體

移動端必須加的東西

viewport視口 width可視寬度 device-width物理設備寬度 user-scalable是否允許用戶縮放 默認值為no initial-scale 初始縮放比例默認1.0  maximum-scale允許用戶縮放到最大比例默認1.0 minimum允許用戶縮放到最小比例默認1.0移動端

eot IE 專用字體
sug兼容手機端

@font-face{

  font-family: "YourWebFontName";
  src: url("YourWebFontName.eot"); /* IE9 Compat Modes */
  src: url("YourWebFontName.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("YourWebFontName.woff") format("woff"), /* Modern Browsers */
  url("YourWebFontName.ttf")  format("truetype"), /* Safari, Android, iOS */
  url("YourWebFontName.svg#YourWebFontName") format("svg"); /* Legacy iOS */
}

https://mjs.sinaimg.cn/wap/online/home/v7/dest/css/fonts/SinaHomeFont.woff?v=0.0.14
直接改點后面的后綴名就可以下載  svg輸入網址之后 直接保存
https://mjs.sinaimg.cn/wap/online/home/v7/dest/css/fonts/SinaHomeFont.eot

inline-block默認4個像素的間距
解決方法父元素加font-size 為0
設置100 1.方便計算2.減小誤差

云服務器 GPU云服務器媒體域名查詢中文媒體域名查詢英文媒體域名查詢 tv媒體域名查詢

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117305.html

詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

leone 2019-08-02 11:54 評論0 收藏0
詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

ymyang 2019-08-29 17:09 評論0 收藏0
詳解css媒體查詢

摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。簡介媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

gotham 2019-08-23 12:42 評論0 收藏0
css3 響應式媒體查詢

摘要：讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術，用于向不同的設備提供定制的樣式表。讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術，用于向不同的設備提供定制的樣式表。為了演示一個簡單的示例，我們可以更改不同設備的背景顏色 /* 將body的背景顏色設置為tan */ body { background-color: tan; } /* 在992px或更低...

Bowman_han 2019-08-30 15:44 評論0 收藏0