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.減少偏差