stu*_*177 14 css mobile responsive-design
我最近开始使用响应式网页设计,并在此进行了基本测试:
它在桌面浏览器中运行良好但是我在加载到高分辨率设备(例如iPhone上的视网膜显示器)时如何处理最小宽度设计时有点困惑.由于这种类型的显示器意味着例如尺寸为16px,这在桌面上读取是正常的,在iPhone 4/5上是不可能读取的.
这通常如何处理？
iCo*_*nor 15
好吧,如果你想让手机上的文字更小或更大,你就可以
@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
}
您可以根据屏幕宽度选择字体大小:
/* Large desktop */
@media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
font-size: 12px;
}
要确保您的布局在移动屏幕上拉伸,您必须使用视口元标记:
<meta name="viewport" content="width=device-width, initial-scale=1" />
此元标记需要位于head标记内."设备宽度"将是您的屏幕可以显示的最大像素.您还可以在那里设置一个常量值(600px).
initial-scale = 1表示它将自动缩放到100%.(0.5 => 50%)
| 归档时间： |
|
| 查看次数： |
16959 次 |
| 最近记录： |