这个是谷歌响应式网页设计公开课的笔记。
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
移动前端开发之viewport的深入理解
Using the viewport meta tag to control layout on mobile browsers
A pixel is not a pixel is not a pixel
