国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-媒體查詢

lwx12525 / 1430人閱讀

摘要：媒體查詢標(biāo)簽像素比像素比物理像素設(shè)備獨(dú)立像素像素通常的設(shè)計(jì)稿檢測(cè)像素比設(shè)計(jì)稿設(shè)備寬度設(shè)置該設(shè)備下的根元素的文字大小改變窗口大小時(shí)也要重新計(jì)算一次比如由豎屏切換到橫屏相對(duì)于根元素字體的單位是根據(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

//檢測(cè)像素比
          // 設(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） 
相對(duì)于根元素字體的單位
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117305.html

相關(guān)文章

  • 詳解css媒體查詢

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

    leone 評(píng)論0 收藏0

  • 詳解css媒體查詢

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

    ymyang 評(píng)論0 收藏0

  • 詳解css媒體查詢

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

    gotham 評(píng)論0 收藏0

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

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

    Bowman_han 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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