tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结

有段时间扑了一个多月的在一个wifi的前端项目上

快做完时各种小问题一堆一堆的修复 处理了一些很零散的问题

因为页面有一个所有页面都有一个背景色有的页面有背景图

主要重点是移动前端的方向因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio)

对于页面适配起来其实有很多值得思考的对方

页面宽度上的处理很方便 可以用百分比的html body样式 或者 我使用了bootstrap用它非常优秀的栅格化和断点

页面高度上我自己定了一套方案虽然在我看来这套方案还有待提高比如没有考虑横屏情况,还有一些细节上深入的东西可以去探究 不过工作进度要紧你可以没完没了的死磕一个东西 去挖知识 去深入探究 但是你不能用没完没了的工作态度去处理一个项目而滞留在每个点上,时间是宝贵的,不能随便浪费.

于是我在项目里是这样做的用一下mediaquery由于只是定一下高度所以我将媒体查询放在了引入的CSS文件里没有用在引入样式文件时媒体查询的方式

由于它是通用定制多个视图的所以将这部分放在了模板页里去引入的一个外部css文件里

 1 /*为大屏幕设备 pc */ 2 @media all and (min-width: 1020px){ 3     .wrap_backgd_size{ 4         min-height: 770px; 5     } 6 } 7 /*for tablet*/ 8 @media all and (max-width: 800px){ 9     10 .wrap_backgd_size{11     min-height: 580px;12 }13 14 }15     /*页面高度定制*/16 /*for iphone4 it ratio is  320x480*/17 @media all and (max-width: 330px) and (max-height: 490px) and (min-height: 470px){18     /*.testmedia{19         color: white;20     }*/21     .wrap_backgd_size{22         min-height: 485px ;23     }24 }25 26 /*for iphone 5 it ratio is 320x568*/27 @media all and (max-width: 330px) and (max-height: 570px) and (min-height: 560px){28     .wrap_backgd_size{29         min-height: 580px ;30     }31 }32 33 34 /*for iphone 6 it ratio is 375x667*/35 @media all and (max-width: 380px) and (max-height: 670px) and (min-height: 660px){36     .wrap_backgd_size{37         min-height: 680px ;38     }39 }40 41 /*for iphone6 plus it ratio is 414x736*/42 @media all and (max-width: 420px) and (max-height: 740px) and (min-height: 730px){43     .wrap_backgd_size{44         min-height: 750px ;45     }46 }47 48 /*for google nexus5 it ratio is 360x640 nexus4=384x640*/49 @media all and (max-width: 385px) and (min-width: 350px) and (max-height: 650px) and (min-height: 630px){    50     .wrap_backgd_size{51         min-height: 650px;52     }53 }

代码贴在这里,以后可以自己再编辑改善和拿来即用

note:1.媒体查询对同一样式的规则应用原则是和css样式应用的优先级是相同的 写在后面的样式会覆盖前面样式

　　　2.自然是使用min-height属性,定一个最小高度,可以让内容超出该区域