這個(gè)是谷歌響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)公開(kāi)課的筆記尉桩。
Lession 2 - Starting Small
Pixels, pixels and moar pixels!
Setting the Viewport
If you don't set the viewport, the browser will determine the viewport size:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
Max-width elements
img,embed,object,video{
max-width: 100%;
}
New Words
pan and zoom 平移和縮放
cater 迎合
density 密度
caveat 警告
rumoured 謠傳的
References
移動(dòng)前端開(kāi)發(fā)之viewport的深入理解
Using the viewport meta tag to control layout on mobile browsers
A pixel is not a pixel is not a pixel
