我最近开始用反应灵敏的网页设计,并在这里做了一个基本的测试：
它在桌面浏览器中工作正常,但是当加载到高分辨率设备上时,如何处理最小宽度设计,例如iPhones上的视网膜显示器,我感到有些困惑.因为这种类型的显示器,这意味着例如尺寸为16px的,在桌面上正常阅读是不可能在iPhone 4/5上阅读的.
这通常如何处理？
解决方法
如果你想要使移动或更大的文字更小的文字,你可以做
@media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
要么
@media screen and (max-width: 480px) {
font-size: 20px; /*Larger*/
}
并确保你在你的&HEAD>标签：
<Meta name="viewport" content="width=device-width,initial-scale=1">
或者您也可以禁用缩放：
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
而对于IE10的支持,请尝试：
@-ms-viewport{
width:device-width
}
