响应式注意事项

仅用于个人学习记录

1.宽度使用百分比+容器浮动（偷懒的做法是采用等比缩放，但是会在小分辨下，文字如蚂蚁般看不清）浮动好处，超出宽度，自动下调

 

2.流体布局：采用百分比 不适用绝对高度，字体大小采用百分比（相对自己大小）

 

3.Meta viewport 参数width=device-width  user-scalable=1 initial-scale=1 maximum-scale=1  minimum-scale=1

最佳组合（<!—ViewPortMeta设置，禁止手动缩放-->）：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 

4.Media Query CSS

/* PC宽屏样式 */

/* iPad 及以下，所有小于（不等于）960宽度的平板电脑 */

@media only screen and (max-width: 959px) {}

/* 仅iPad 竖版，所有小于（不等于）960宽度的平板电脑的竖版 */

@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* iPhone 及以下 */

@media only screen and (max-width: 767px) {}

/* 仅iPhone 横版，包括某些平板电脑的竖版 */

@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* 仅iphone4 竖版 */

@media only screen and (max-width: 479px) {}

根据屏幕大小加载不同的样式表

<link rel=”stylesheet” type=”text/css”media=”screen and 

(max-device-width: 400px)”href=”tinyScreen.css” />

 

5.图片处理：提供不同尺寸的图片；通过background-position来控制裁剪图片

 

6.<link rel="apple-touch-icon-precomposed" href="http://cdn/img-114-114.png"> -------添加到桌时有圆角/高光修饰

  <link rel="apple-touch-startup-image" href="http://cdn/img-320-460.png">-------只处理圆角没有高光修饰

<!--添加到主屏时的图标-->

7.flex box布局

8.图片自适应 img { max-width: 100%;}

 

来源于：http://www.socialbeta.com/articles/2013-the-year-of-responsive-web-design.html