移動web——基本知識點總結

視口viewportweb

一、在桌面端的瀏覽器的寬度有肯能是很大的,若是設置了一個很大的值,那麼在移動端中的瀏覽器顯示的時候會有橫向移動的拖拽條,爲了不出現這樣的橫向拖拽條,咱們每次都要頁面的寬度就是移動設備瀏覽器的寬度瀏覽器

二、移動設備的瀏覽器(或App中的webview)比如是相框,viewport就是相框中的畫,若是畫與相框同樣大是否是很完美?app

三、快捷鍵:meta:vp + tab,使用了meta能夠將視口調整到與設備大小同樣佈局

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

三、參數解釋spa

name:聲明屬性是viewport屬性
content:屬性具體設置的值
width:寬度,通常是設備寬度device-width
height:高度,通常不設置讓其自動撐大
initial-scale:視口默認的縮放比例 通常默認設置的是1.0
user-scalable:設置是否支持縮放 通常設置的是 no、false、0
maximum-scale:最大的所放值  1.0 
minimum-scale:最小的所放值 1.0

移動端樣式scala

一、點擊高亮效果:移動端默認點擊會附帶高亮效果,能夠將此效果變成透明設計

a, button, input, optgroup, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

二、盒子模式:box-sizing設置以邊框爲主,這樣可以保證盒子大小不會由於內容的變化而改變其佈局3d

box-sizing: content-box;

三、input樣式:移動端input標籤會附帶有3d效果,簡單的border與outline設置爲none沒法去除code

input {
    border: none;
    outline: none;
    -webkit-appearance: none;
}

四、最小最大寬度:考慮到移動設備在大尺寸的的屏幕不會過分縮放 失去清晰度,在小尺寸的屏幕中不會出現佈局錯亂的問題,值不是固定的,根據實際狀況調整blog

max-width: 640px;  /*在行業當中的移動端的設計圖通常使用的是640px*/
min-width: 300px;  /*在移動設備當中如今最小的尺寸320px*/

五、結構僞類選擇器:E是子元素,意思是相對E這個子元素的父元素下的第幾個同類元素

E:first-of-type匹配同類型中的第一個元素E
E:last-of-type匹配同類型中的最後一個元素E
E:nth-of-type(n) 匹配同類型中的第n個元素E
相關文章
相關標籤/搜索