我现在正在研究响应式CSS和设计,我想知道我应该如何计算出各种设备的宽度。我不想花一整天的时间测试每一台可能的移动设备,我只想让响应式的布局足够好地工作。
我看到一些网站使用@media only screen and (max-device-width: xx),但它似乎将其限制在非常具体的分辨率,而不是实际的浏览器窗口大小。
任何建议都是很棒的。我对网页开发或CSS并不陌生,但对响应式设计却完全陌生。
所以我意识到当前响应式网页设计中的一个大问题是,当你下载可能不需要的大图片时,比如在手机上-导致严重的性能影响-你也可以使用JS条件加载在一定程度上;所以我的问题是,我不能只在媒体查询中加载我的大多数图片作为背景图片,并克服这个问题,直到有更好的东西出现吗?示例:
/* base styles */
@media all and (min-width: 53.75em) {
header .inner{
background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}
显然,这是完全非语义的,但可以解决性能问题,