成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css-媒體查詢

lwx12525 / 1439人閱讀

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

媒體查詢

標(biāo)簽:css
[TOC]

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

//檢測像素比
          // 設(shè)計(jì)稿
      var desW = 640; // 100px
      function refreshRem() {
          // 設(shè)備寬度(css)
          var winW = document.documentElement.clientWidth;
          document.documentElement.style.fontSize = 100/(desW/winW) + "px";//設(shè)置該設(shè)備下的根元素html的文字大小
          //   x= winW/desW*100
      }
      refreshRem();
      //         改變窗口大小時(shí)也要重新計(jì)算一次 比如由豎屏切換到橫屏
      window.addEventListener("resize", refreshRem);
rem（root-rm） 
相對于根元素字體的單位
em是根據(jù)父元素字體
移動(dòng)端必須加的東西 
viewport視口 width可視寬度 device-width物理設(shè)備寬度 user-scalable是否允許用戶縮放 默認(rèn)值為no initial-scale 初始縮放比例默認(rèn)1.0  maximum-scale允許用戶縮放到最大比例默認(rèn)1.0 minimum允許用戶縮放到最小比例默認(rèn)1.0移動(dòng)端
 
eot IE 專用字體
sug兼容手機(jī)端
@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
直接改點(diǎn)后面的后綴名就可以下載  svg輸入網(wǎng)址之后 直接保存
https://mjs.sinaimg.cn/wap/online/home/v7/dest/css/fonts/SinaHomeFont.eot

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117305.html

相關(guān)文章

  • 詳解css媒體查詢

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

    leone 評論0 收藏0

  • 詳解css媒體查詢

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

    ymyang 評論0 收藏0

  • 詳解css媒體查詢

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

    gotham 評論0 收藏0

  • css3 響應(yīng)式媒體查詢

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

    Bowman_han 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<