所以我使用max-width属性缩放了精选图像,但是我想知道是否可以在导航图像图标上实现相同的效果?这可以通过图像精灵来完成,或者推荐的方法是什么?是否可以为响应式设计缩放导航图标?
0
A
回答
3
根据媒体查询断点,您可以加载不同的图像大小。
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
#navIcon {
background-image:url('small.jpg');
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
#navIcon {
background-image:url('normal.jpg');
}
}
1
你可以做什么克里斯说加上使用一个精灵做背景位置。
你也可以使用和做一个高度100%。
我会推荐克里斯建议的。
2
这真的取决于你想要多少布局改变,如果你需要匹配的供应商有一定的要求(苹果的准则,例如)
我有一个网站,所有的菜单图像是相同的高度,并且如果在更宽的屏幕上使用线性布局。
将其更改为更小屏幕的那一刻我包含了@media特定的大小和菜单图标的放置要求。例如,我希望它们堆叠,我希望它们的像素高度为42像素(Apple称触摸屏的最小可触摸尺寸)
对于桌面,我将特定宽度和高度设置为'auto',而对于更窄的屏幕,我有一个特定的高度(42像素),宽度设置为'自动'。
我倾向于不想依赖多个图像,因为它确实会使它随着时间的推移变得更难以维护。事实上,我停止为我的菜单使用图像,并使用CSS(尽管我没有单调的图像精灵)做了所有的事情,我使用自制的dingbat web字体,可以很好地缩放比例)
相关问题
- 1. 缩放导航栏 - 响应式设计
- 2. 响应式设计 - Android无法缩放
- 3. 引导响应式图像缩放
- 4. 响应式设计图片无法缩放
- 5. 响应式设计图像缩放(tumblr主题)
- 6. 麻烦缩小响应标志图像导航栏与引导
- 7. 使用响应式导航栏缩放问题
- 8. 响应式导航
- 9. 响应式导航
- 10. 以导航为中心的响应式徽标
- 11. 响应式导航标签,例如可折叠的导航标签
- 12. 是否可以使用Sahi测试响应式网页设计应用程序?
- 13. 保存matplotlib交互式导航中的缩放设置图
- 14. 我可以导航,放大和缩小R图吗?
- 15. 响应式设计行为
- 16. 是否可以使字体可缩放?
- 17. 是否可以通过自举响应式css实现拖放?
- 18. 响应式网站设计元素缩放
- 19. CSS响应式设计:奇怪的移动缩放问题
- 20. 缩放响应式设计的iframe仅限CSS
- 21. 在响应式设计中缩放对象
- 22. 响应式绝对图像缩放
- 23. 是否可以禁用jQuery的移动响应设计?
- 24. 是否可以通过PHP解压缩SharpZipLib压缩响应?
- 25. 设计一个可折叠的响应导航栏
- 26. 垂直响应设计:按比例缩放图像
- 27. 如何在无响应的设计中缩放大图像?
- 28. 在响应式设计中更改导航项目的顺序
- 29. 在响应式设计中导航栏叠加菜单项
- 30. 问题与jQuery粘滞导航和响应式设计
您可以使用SVG,但支持是我还是听过最近还是粗略的... – 2012-01-04 18:27:21