链接：http://dwz.cn/1gzq06
------------------------------------------------------
响应式布局
响应式布局麻烦之处就是每个尺寸的都要进行css定义，这个真的不是一般的蛋疼，下面有搜集到的各种尺寸css media query内容，搜集来源：media-queries-for-standard-devices好东西哦。
看了之后是不是非常之蛋疼呢，那么只有使用工具来写这些玩意儿了，俺用得最爽的就是 stylus ，真的爽yy了，如果 stylus 不会玩耍请看这里 stylus入门使用方法
stylus
// media queriesmq-mobile = screen and (max-width: 479px)mq-tablet = screen and (min-width: 480px) and (max-width: 767px)mq-iphones4 = only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)mq-normal = screen and (min-width: 768px).page-number display: inline-block @media mq-mobile display: none @media mq-tablet color:red @media mq-iphones4 font-size:12px @media mq-normal background:yellow
编译成
.page-number { display: inline-block;}@media screen and (max-width: 479px) { .page-number { display: none; }}@media screen and (min-width: 480px) and (max-width: 767px) { .page-number { color: #f00; }}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .page-number { font-size: 12px; }}@media screen and (min-width: 768px) { .page-number { background: #ff0; }}
phones and handhelds iphones /* ----------- iphone 4 and 4s ----------- *//* portrait and landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {}/* portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}/* landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}/* ----------- iphone 5 and 5s ----------- *//* portrait and landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}/* portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}/* landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}/* ----------- iphone 6 ----------- *//* portrait and landscape */@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { }/* portrait */@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { }/* landscape */@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }/* ----------- iphone 6+ ----------- *//* portrait and landscape */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { }/* portrait */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { }/* landscape */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
galaxy phones /* ----------- galaxy s3 ----------- *//* portrait and landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {}/* portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {}/* landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {}/* ----------- galaxy s4 ----------- *//* portrait and landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/* portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/* landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}/* ----------- galaxy s5 ----------- *//* portrait and landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/* portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/* landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
htc phones /* ----------- htc one ----------- *//* portrait and landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}/* portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}/* landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
tablets ipads /* ----------- ipad mini ----------- *//* portrait and landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/* portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/* landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- ipad 1 and 2 ----------- *//* portrait and landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/* portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/* landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- ipad 3 and 4 ----------- *//* portrait and landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}/* portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}/* landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}
galaxy tablets /* ----------- galaxy tab 10.1 ----------- *//* portrait and landscape */@media (min-device-width: 800px) and (max-device-width: 1280px) {}/* portrait */@media (max-device-width: 800px) and (orientation: portrait) { }/* landscape */@media (max-device-width: 1280px) and (orientation: landscape) { }
nexus tablets /* ----------- asus nexus 7 ----------- *//* portrait and landscape */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}/* portrait */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {}/* landscape */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {}
kindle fire /* ----------- kindle fire hd 7 ----------- *//* portrait and landscape */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {}/* portrait */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}/* landscape */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {}/* ----------- kindle fire hd 8.9 ----------- *//* portrait and landscape */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {}/* portrait */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}/* landscape */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {}
laptops /* ----------- non-retina screens ----------- */@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { }/* ----------- retina screens ----------- */@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { }
wearables apple watch /* ----------- apple watch ----------- */@media (max-device-width: 42mm) and (min-device-width: 38mm) { }
moto 360 watch /* ----------- moto 360 watch ----------- */@media (max-device-width: 218px) and (max-device-height: 281px) { }