移動端web開發

標籤：介紹   等於   項目   元素   允許   快捷   round   max   內容   

1、無論是PC端還是移動端，開發出來的頁面都是運行在瀏覽器上的；

2、移動端裝置的瀏覽器大多是基於webkit核心，屬於進階瀏覽器 支援H5 C3特性；

 

視口概念

①： PC端視口取決於瀏覽器大小（HTML）---螢幕大小

② ：移動端視口由手機廠商規定為980，因為當時很多網站的版心都是980並根據手機裝置寬度等比縮小網頁。

此時就會出現一個問題： 頁面中有些內容看不清。思考： 可不可以將移動端的視口等於手機裝置寬度？

移動端開發基本

<meta name="viewport"

content="width=device-width" ，//將視口的寬度等於裝置寬度

user-scalable = "no"， //不允許使用者用手指縮放大小

initial-scale="1.0",//初始化縮放比例為1，不縮放

maximum-scale="1.0",//網頁最大縮放比例

minimun-scale="1.0" //網頁最小縮放比例

 

移動端布局方式

1、流式布局--百分百布局

基本點：width，padding,margin屬性用百分百的形式表示。

主要：在百分百世界中，padding,margin四個方向都是相對於父級元素的高度。

實戰項目介紹

1、建立檔案架構  css,js,images,index.html

2、頁面配置

           從上往下，從左往右，從外往裡

3、公用樣式設定

    *，*::before,*::after {   margin: 0; padding: 0 ;box-sizing: border-box}

    a { color: #000; text-decoration: none;

        -webkit-tap-highlight-color:transparent; //移動端特有的，去除手機輕敲背景高亮

        }

    body { background: #f5f5f5; font-size: 12px ;}

    ul {  list-style:none; }

     textarea { resize:none; //禁止拖動文本域，注意：現在瀏覽器不支援；但是行內樣式支援}

     input { border: none; outline: none;}

須知： 所有瀏覽器的字型大小預設均為16px

經驗值積累：

1）當一個區塊層級元素設定絕對位置或者固定定位後，由區塊層級元素變成行內塊元素。此時需 width:100%

2) 移動web頁面中header { height: 40px; }

header布局：左右-絕對位置，中間搜尋方塊 100%，兩邊用padding 撐開；

3) 移動端放置圖片同PC端不同，原因： 螢幕像素密度比= 物理像素/CSS像素=window.devicePixelRatio
產生原因：蘋果 RETINA

關於蘋果手機的螢幕寬度介紹

①iphone 5, iphone 5s  320px   2(dpr)

②iphone 6 375px  2(dpr)

③ iphone 6s ,iphone 6s+ 414px  3(dpr)

結論： 通常準備3倍圖片大小的高清圖

 

PS中測量圖片大小的方法：

1、快速鍵M，選區工具測量後；如果選擇不太精確，則選擇-變換選區重新調整

精靈圖的操作：1、background:url  2、background-size(原圖片縮小2倍)  3、background-position(精確定位-縮小2倍)

 

移動端web開發