響應式布局

首先移動端必須要有乙個meat標籤

<

meta 
name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>

name="viewport" ：視口 ；

content="width=device-width 設定視口的寬度等於裝置的寬度，如果不是設定的話預設寬度是980px,如果不設定的話就是，手機有多寬，我們的寬度就有多寬
user-scalable=no 禁止使用者手動縮放
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0" 設定螢幕最大或最小的縮放比例
高清屏：蘋果手機是2倍高畫質螢幕的，也就是我們在手機看到的那張100*100，其實蘋果手機是按照200*200的尺寸給我們渲染的，這樣的話，如果真是本身是100*100，呈現出來會有拉伸模糊的效果，
=》蘋果手機上需要的素材都需要比看到的尺寸大一倍才可以；

利用上移動端要搞1倍，2倍，3倍

使用media**查詢，判斷dpr倍數；分別操作

.box

@media all and (-webkit-device-pixel-ratio: 2)
}@media all and (-webkit-device-pixel-ratio: 3)
}這種做法繁瑣，所以一般直接使用3倍圖，直接用

**查詢：@media

=>**裝置：all所有裝置 screen 所有螢幕裝置pc+移動端 print列印裝置
=》**條件：指定在什麼條件下執行對應的樣式
@media all and (max-width:319px)
}@media all and(min-width:320px) and (max-width:359px)
}

1.流式布局法

=》容器或者盒子的寬度一般都不寫固定的值，而是用百分比

=》其餘樣式：字型、高度、mr/pd等等都是按照設計稿上標註尺寸的一般來設定；
=》對於有些螢幕尺寸下，我們設定的固定值看起來不是特別的好看的話，使用@media進行調整；

ok整體；乙個真實響應式專案需要的meta標籤有哪些

<

meta 
name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<
meta 
name
="format-detection"
content
="telephone=no,email=no"
>
//忽略**號碼

如果有些號碼需要呼叫撥號鍵， 立即撥打**

立即傳送短息
傳送郵件

ios系統meta/link設定

<
meta 
name
content
="yes"
>
說明：2、 改變頂部狀態條的顏色；
<
meta 
name
content
="black"
/>
說明： 預設值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；
safari 瀏覽器有乙個「新增到主螢幕」的功能，使用者可以像儲存書籤一樣把乙個**新增到主螢幕，下次使用者直接點選主螢幕上的圖示就能進入**。
<
span 
style
="font-size:14px;"
>
<
link 
relhref
/>
<
link 
relsizes
="114x114"
href
/>
<
link 
relsizes
="144x144"
href
/>
span
>

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...

響應式布局

首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...