手機web網頁的設計

 

Viewport(視口)

1.視口概念

描述：視口，就是視圖窗口的簡稱，頁面中視口大小實際上就是html元素的顯示大小

說明：頁面想要在移動端加載必須進行視口適配

          若是不對頁面進行調整，默認頁面在移動端加載時，都認爲頁面視口寬度爲980px

2.解決方案

使用<meta>

       <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0">

說明：

 (1)只要作移動端適配，就對頁面添加此標籤，此標籤可以使得頁面不在按照980px進行加載

 (2)必要內容：

width=device-width 設置頁面視口大小和設備尺寸大小相同

        user-scalable=no   設置用戶不可對頁面進行放大縮小設置

        initial-scale=1.0  設置頁面加載倍率爲1倍

 (3)可選內容：

　　minimum-scale=1.0  設置頁面最小縮小倍率爲1.0

        maximum-scale=1.0  設置頁面最大放大倍率爲1.0

補充：

這個標籤在頁面中並非全部的移動端設備都能生效，幾乎全部的移動端設備都不生效，可是不設置必定不生效

 

rem單位

       rem是css的一個尺寸單位相似於px 、em、%同樣都是用來設置大小的

       rem表示是html的字體大小的多少倍

語法：

1.css語法

html{       //設置html標籤的css樣式來設置字體

        font-size:100px;

}

1rem = 1*100px(根元素設置大小)=100px

//可使用css3新增媒體查詢（@media）進行設置，達到適應效果

 

2.js語法         //使用這個方法能夠實現自適應，減小代碼

 

window.onload =function(){

//頁面載入後，獲取到頁面寬度後設置html字體大小

document.documentElement.style.fontSize =(document.documentElement.clientWidth/750)*100+'px';

}

window.onresize =function(){

        //設置頁面改變後，進行頁面刷新設置html字體大小

document.documentElement.style.fontSize =(document.documentElement.clientWidth/750)*100+'px';

}

在750px大小的設備下：1rem=750px/750px*100=100px;

在375px大小的設備下：1rem =375px/750px*100= 50px;

補充：之因此習慣使用750px來設置，是由於ps設計稿大多都是750px作標準，能夠移動端使用，不須要再進行等比例縮小或放大，能夠按照實際開發進行更改

 

less

描述：

1.由於css文件在加載的時候，不容許用戶對css中的內容進行計算等操做必須直接寫出具體值，才能進行顯示。但有些狀況下，咱們須要在css中進行計算操做，以保證賦值結果的精確，因而提出了一種CSS 預處理語言，less是其中一種，文件擴展名爲.less

2.less文件和css文件做用基本相同，只不過less中容許書寫算式等內容

3.它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

說明：less文件會在計算加載完畢後，生成一個css文件。這個css文件內容是根據less加載的。

補充：less中書寫樣式的時候，沒法提示，都須要手動書寫完成。

 

這裏使用kaoloa行操做運算，而後調用生成的css文件

table{

       width:700/((1000/750)*100)rem;

       height:300/((1000/750)*100)rem;

       font-size:20/((1000/750)*100)rem;

}

tr:nth-child(1){

       font-size:30/((1000/750)*100)rem;

}

 

使用koala運算生成後的css文件：

table {

  width: 5.25rem;

  height: 2.25rem;

  font-size: 0.15rem;

}

tr:nth-child(1) {

  font-size:0.225rem;

}

 

生成的後的css文件直接調用就行了