日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
總結(jié)個(gè)人使用過的移動(dòng)端布局方法

這篇文章，主要是總結(jié)一下，我在移動(dòng)端布局用過的方法。有三種，一種是響應(yīng)式布局，利用@meida判斷各個(gè)size;第二種是REM;最后是設(shè)置viewport中的width。

響應(yīng)式布局

這種感覺是最好理解了，利用@media進(jìn)行斷點(diǎn)，在每個(gè)斷點(diǎn)中編寫css。

 
 
 
 
      
  
  
  
  1. @media (max-width:768px){ 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.     //css 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. }  
    6.

上面這段代碼，在瀏覽器的寬度低于768時(shí)有效。同理，如果把max換成min，就會(huì)變成高于768時(shí)有效?？梢栽O(shè)置寬度，也可以設(shè)置高度，也可以同時(shí)設(shè)置多個(gè)值。

在MDN,@media上，發(fā)現(xiàn)很多值都可以做判斷的。寬，高，寬高比，顏色(這個(gè)是指定輸出設(shè)備每個(gè)像素單位的比特值)，是否橫屏或豎屏，還有很多，可以去MDN看看。

媒體類型

@meida還可以根據(jù)媒體類型進(jìn)行斷點(diǎn)。

  • all，所有設(shè)備
  • print，打印
  • screen，彩色的電腦屏幕
  • speech，不知道什么來的。

關(guān)鍵字

 
 
 
 
      
  
  
  
  1. @media (max-width:1000px){ 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.     div{background:blue;} 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. @media (min-width:1000px) and (max-width:1150px){ 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     div{background: yellow;} 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. @media only screen and (max-width:1150px){ 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.     div{border:solid 1px;} 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. } 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. @media not print and (max-width:1150px){ 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.     div{border-radius:50%;} 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. }  
    24.
  • and，就是‘和’的意思，前后兩個(gè)條件都達(dá)到時(shí)
  • only，唯一
  • not，除了這個(gè)之外

上面4個(gè)@media，分別的效果是：

  1. 當(dāng)瀏覽器寬度低于1000px時(shí)
  2. 當(dāng)瀏覽器寬度大于1000px 和 小于1150px時(shí)
  3. 當(dāng)在屏幕上顯示 和 寬度小于1150px時(shí)
  4. 除了在打印上顯示外 和 寬度小于1150px時(shí)

按需‘加載’css

@media還可以用在link標(biāo)簽上。

 
 
 
 
      
  
  
  
  1.  
    2.

當(dāng)瀏覽器寬度低于500px時(shí)，1.css的樣式才會(huì)有效果。但這不代表大于500px時(shí)，就沒加載了1.css。使用了@media屬性后，只會(huì)讓你當(dāng)條件符合了，才讓對應(yīng)的css文件有效果。而且用這種方式有一個(gè)好處，就是不用在css里寫@media。

平常響應(yīng)式網(wǎng)站的開發(fā)

平時(shí)響應(yīng)式網(wǎng)站的開發(fā)，我都會(huì)先對比PC和MOBILE的設(shè)計(jì)稿，看看有什么區(qū)別，然后才進(jìn)行編寫css。通常都是使用flex。寬度盡量用百分比，間距、高度、字體大小使用 em，就可以很方便的進(jìn)行大小的控制。

REM

REM這個(gè)單位，會(huì)根據(jù)html的font-size大小進(jìn)行轉(zhuǎn)換。

 
 
 
 
      
  
  
  
  1. html{font-size:100px;} 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. p{padding-top:.5rem;}  
    4.

轉(zhuǎn)換后p的padding-top就是50px了。只要我們進(jìn)行適當(dāng)?shù)挠?jì)算，當(dāng)前屏幕的寬度，html的font-size是多少px就OK了。

如何計(jì)算當(dāng)前html的font-size值

比如，我們拿到的設(shè)計(jì)稿是750px，那就設(shè)置成當(dāng)屏幕寬度是750的時(shí)候，html的font-size就是100px(當(dāng)然這個(gè)100px你可以隨意設(shè)置的，我設(shè)置成100px只是方便我計(jì)算)，然后就根據(jù)當(dāng)前屏幕的寬度 / 750 * 100，就得到了當(dāng)前屏幕寬度的font-size值。

 
 
 
 
      
  
  
  
  1. //當(dāng)前屏幕寬度 / 750 = 當(dāng)前屏幕寬度的font-size / 100 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. //代碼如下 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. (function (doc, win) { 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     var docEl = doc.documentElement, 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     recalc = function () { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.       var clientWidth = docEl.clientWidth; 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.       if (!clientWidth) return; 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     }; 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.    
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.     if (!doc.addEventListener) return; 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.        win.addEventListener(resizeEvt, recalc, false); 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.        doc.addEventListener('DOMContentLoaded', recalc, false); 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. })(document, window);  
    30.

上面這段代碼，是直接根據(jù)屏幕寬度進(jìn)行計(jì)算font-size的。而淘寶移動(dòng)端REM方案，還根據(jù)你的dpr去計(jì)算，而且會(huì)進(jìn)行整體的縮放。淘寶的這種方案，比上面的代碼會(huì)好很多。

大家注意邊框的大小。第二張圖的邊框是比第一張圖的小的，兩個(gè)都是border:solid 1px。其他的邊距都是一樣。淘寶的方案，解決了另一個(gè)問題：邊框1px的問題。

大家可以打開以下鏈接，看看具體的效果：

第一種方案(http://www.rni-l.com/mobile/index2.html)

第二種方案(http://www.rni-l.com/mobile/index.html)

淘寶移動(dòng)端REM

這個(gè)很簡單，只需要加載js就好了