標籤：解決方案 解決 限制 IME 流式 name 移動端 按鈕 round
一、適配問題解決方案：流式布局 + viewport
1、流式布局
百分比布局，通過設定盒子的寬度為百分比來根據螢幕的大小進行伸縮，特點是不受固定像素的限制，內容向兩側填充
2、viewport
在移動端用來承載網頁的這個地區，就是我們的視覺視窗，也叫viewport（視口）, 這個地區可設定高度寬度，可按比例放大縮小，而且能設定是否允許使用者自行縮放。
<meta name = "viewport">讓瀏覽器知道設定了viewport，viewport只在移動端識別
3、viewport 參數
width：定義viewport的寬度，有一個特殊值 device-width當前裝置的寬度
initial-scale：預設的初始縮放比
設定1.0，和PC端頁面的顯示比例一致，一比一顯示在移動端
user-scalable：是否允許使用者自行縮放 1-yes，0-no
maximum-scale：最大縮放比
minimum-scale：最小縮放比
4、構建標準的移動端web開發頁面
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, user-scalable = 0">
快速鍵—meta：vp
二、在寫項目要注意的問題
base樣式定義：reset css 重設預設的、瀏覽器內建的一些樣式（所有的標籤和偽類），目的是保持各種終端顯示一致
1、在移動端特殊的設定
①清楚點擊高亮效果
-webkit-tap-highlight-color: transparent;
②設定所有的盒子的寬度以邊框開始計算
在移動端通常使用的是百分比布局，那麼這樣的布局如果使用border或者padding會使容器的寬度超出螢幕的寬度產生捲軸。
-webkit-box-sizing: border-box;
box-sizing: border-box;
③清除input預設的樣式
- webkit-appearance: none;
2、最小寬度、最大寬度的限制
min-width：300px; //適配小螢幕裝置，為了有較好的布局效果。
max-width：640px;//保證頁面在尺寸比較大的裝置當中保證頁面的效果也就是清晰度
3、物理像素和表徵圖模糊度問題
解決方案，採用壓縮表徵圖尺寸的方式來解決。
如果是Img使用直接設定寬高的方式來壓縮。
如果是背景使用的是設定background-size的方式來壓縮
4、搜尋按鈕調用
在移動端調用IME，彈出的小鍵盤enter鍵會變成搜尋按鈕
<form action = "#">
<input type = "search" placeholder = "提示" />
</form>
5、結構性偽類原則器---同類型選取器
E:first-of-type匹配同類型中的第一個元素E。
E:last-of-type匹配同類型中的最後一個元素E。
E:nth-of-type(n) 匹配同類型中的第n個元素E。
移動開發web第一天
