Jon*_*nhz 1 responsive-design twitter-bootstrap
所以我有这个html页面:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="col-lg-12">
<div>
<h1 class="text">Hello</h1>
<h1 class="text">Welcome</h1>
</div>
</div>
</div>
</body>
</html>
这个CSS:
.text{
margin-top: 50px;
text-transform: uppercase;
text-align: center;
font-family: Arial;
font-size: 120px;
}
问题是移动设备中初始比例设置为1的移动设备中的字体大小在移动设备中太大而在我没有设置初始比例时太小.
PC:http://cl.ly/image/3S3u1V3N3G40/hello.jpg
初始比例为1的移动设备:http: //cl.ly/image/2W0N142o1f16/IMG_1020.PNG (文字太大)
移动没有初始比例= 1:http://f.cl.ly/items/2s0O3x122R2b0o1F2P3Q/IMG_1021.PNG (文字太小)
问题是:如何以一种快速响应的方式使文本大小在PC和移动设备中看起来都很好？
小智 6
谷歌推荐的元视口是使用initial-scale=1
<meta name="viewport" content="width=device-width, initial-scale=1">
尝试移动优先方法.首先开始为较小的视口开发,并在视口变宽时使用媒体查询进行调整.
通常,使用em而不是px字体大小被认为是最佳实践.
所以你可以用这样的东西:
.text {
margin-top: 50px;
text-transform: uppercase;
text-align: center;
font-family: Arial;
font-size: 1em;
}
@media (min-width: 600px) {
.text {
font-size: 1.1em;
}
}
@media (min-width: 1100px) {
.text {
font-size: 1.2em;
}
}
@media (min-width: 2200px) {
.text {
font-size: 1.4em;
}
}
| 归档时间： |
|
| 查看次数： |
2631 次 |
| 最近记录： |