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

標籤：問題   相對   n個元素   固定   屬性   清晰度   20px   out   input   

視口viewport

1、行動裝置的瀏覽器（或App中的webview）好比是相框，viewport就是相框中的畫，如果畫與相框一樣大是不是很完美？

2、快速鍵：meta：vp + tab，使用了meta可以將視口調整到與裝置大小一樣

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

3、參數解釋

name：聲明屬性是viewport屬性content：屬性具體設定的值width：寬度，一般是裝置寬度device-widthheight：高度，一般不設定讓其自動撐大initial-scale：視口預設的縮放比例 一般預設設定的是1.0user-scalable：設定是否支援縮放 一般設定的是 no、false、0maximum-scale：最大的所放值  1.0 minimum-scale：最小的所放值 1.0

移動端樣式

1、點擊高亮效果：移動端預設點擊會附帶高亮效果，可以將此效果變成透明2

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

2、盒子模式：box-sizing設定以邊框為主，這樣能夠保證盒子大小不會因為內容的變化而改變其布局

box-sizing: content-box;

3、input樣式：移動端input標籤會附帶有3d效果，簡單的border與outline設定為none無法去除

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

4、最小最大寬度：考慮到行動裝置在大尺寸的的螢幕不會過度縮放 失去清晰度,在小尺寸的螢幕中不會出現布局錯亂的問題，值不是固定的，根據實際情況調整

max-width: 640px;  /*在行業當中的移動端的設計圖一般使用的是640px*/min-width: 300px;  /*在行動裝置當中現在最小的尺寸320px*/

5、結構偽類別選取器：E是子項目，意思是相對E這個子項目的父元素下的第幾個同類元素

E:first-of-type匹配同類型中的第一個元素EE:last-of-type匹配同類型中的最後一個元素EE:nth-of-type(n) 匹配同類型中的第n個元素E

 

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