Responsive Web Design Fundamentals

这个是谷歌响应式网页设计公开课的笔记。

Lession 2 - Starting Small

Pixels, pixels and moar pixels!

DIP and Hardware Pixels

DPI

Pixelation Quiz

Calculating DPR(Device Pixel Ratio) Quiz

What's the difference? Quiz

Calculating CSS Pixels Quiz

How wide is the viewport?

Setting the Viewport

If you don't set the viewport, the browser will determine the viewport size:

Default Viewport Sizw

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%;
}

Relative Sizes Quiz

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