手機移動端相關適應

不同的螢幕可以自適應

viewport 手機螢幕視口
width=device-width 螢幕寬等於視口寬
initial-scale=
1.0 預設放大比例1.0
maximum-scale=
1.0 最大比例1.0
minimum-scale=
1.0 最小比例1.0 手機觸屏
user-scalable=no 禁止使用者縮放

用的畫素值 rem em 盡量避免px

"viewport" content=

"width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,user-scalable=no"
/>
* body,html
.box
.box>div
<
/style>
"box"
>
"background: red"
>
<
/div>
"background: yellow"
>
<
/div>
"background: deepskyblue"
>
<
/div>
"background: greenyellow"
>
<
/div>
"background: lightpink"
>
<
/div>
<
/div>

將寬度改為固定的，initial-scale=1.0預設放大比例這句話刪除

"viewport" content=

"width=320,maximum-scale=5.0,minimum-scale=1.0,user-scalable=no"
/>
* body,html
.box
.box>div
<
/style>
"box"
>
"background: red"
>
<
/div>
"background: yellow"
>
<
/div>
"background: deepskyblue"
>
<
/div>
"background: greenyellow"
>
<
/div>
"background: lightpink"
>
<
/div>
<
/div>

"" target=

"web"
/a>
"web"
>
<
/iframe>

移動端相關概念

設計稿的寬為750px 去掉頭部40px狀態列顯示 viewport是視口 user scalable no 禁止使用者縮放 用畫素寫的移動端頁面，設計稿的寬 比值 dpr是2倍,手動除2 配合box sizing border box html 用rem寫移動端 需要將行內塊元素轉為塊元素 spa...

前端相關總結

arr.indexof i 判斷i是否在arr陣列中。js方法 var arr new array js新建陣列。xx jquery選擇器。text 獲取或者改變指定元素的文字 jquery html 獲取或改變指定元素的html元素以及文字 jquery val 獲取或者改變指定元素的value值...

前端相關js

詳解 這是個是ie8的專用標記,用來指定ie8瀏覽器去模擬某個特定版本的ie瀏覽器的渲染方式 比如人見人煩的ie6 以此來解決部分相容問題，例如模擬ie7的具體方式如下 但令我好奇的是，此處這個標記後面竟然出現了chrome這樣的值，難道ie也可以模擬chrome了?迅速搜尋了一下，才明白原來不是微...