一、適配問題解決方案：流式布局 + 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、搜索按鈕調用
  在移動端調用輸入法，彈出的小鍵盤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。

轉載于:https://blog.51cto.com/13517854/2067593

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的移动开发web第一天的全部內容，希望文章能夠幫你解決所遇到的問題。

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