視口viewport

1、在桌面端的瀏覽器的寬度有肯能是很大的，如果設置了一個很大的值，那么在移動端中的瀏覽器顯示的時候會有橫向移動的拖拽條，為了避免出現這樣的橫向拖拽條，我們每次都要頁面的寬度就是移動設備瀏覽器的寬度

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

3、快捷鍵：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-width height：高度，一般不設置讓其自動撐大 initial-scale：視口默認的縮放比例 一般默認設置的是1.0 user-scalable：設置是否支持縮放 一般設置的是 no、false、0 maximum-scale：最大的所放值 1.0 minimum-scale：最小的所放值 1.0

移動端樣式

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

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匹配同類型中的第一個元素E E:last-of-type匹配同類型中的最后一個元素E E:nth-of-type(n) 匹配同類型中的第n個元素E

?

轉載于:https://www.cnblogs.com/wuqiuxue/p/8228878.html

總結

以上是生活随笔為你收集整理的移动web——基本知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。