css-媒體查詢

大月明發表於2019-01-27
CSS

媒體查詢

標籤: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移動端

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=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.減小誤差

相關文章