我有一个在 Android 和 IOS 上运行的应用程序。
该应用程序有一些 WebView 组件显示 HTML
从我发现有“em”和“ viewport ”单元以及 css 中的“@media”。
我是 HTML5 和 CSS3 的新手，有人可以给我展示一个移动设备响应式字体大小的示例。
对我来说最重要的是在手机和平板电脑之间有不同的字体大小，而且在移动设备的不同屏幕尺寸之间（纵向和横向）。
编辑：
WebView 组件不是全屏的，它们是文本框的大小，并且大小是动态的。
问问题
16478 次
2 回答
8
在媒体查询中使用
HTML
<p class="fonts">Administrator</p>
添加媒体查询
@charset "utf-8";
/* CSS Document */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.fonts
{
font-size: 75%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
.fonts
{
font-size: 120%;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
.fonts
{
font-size: 120%;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.fonts
{
font-size: 120%;
}
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.fonts
{
font-size: 150%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.fonts
{
font-size: 120%;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
.fonts
{
font-size: 156%;
}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
.fonts
{
font-size: 200%;
}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.fonts
{
font-size: 190%;
}
}
我使用 % 作为字体大小，这只是字体大小的示例，尝试一下并添加 % 你认为最好的
于 2013-07-28T07:55:12.363 回答
0
最简单的方法是使用 % 或 em 中的尺寸。只需将基本字体大小设置为设备的默认值，然后全部放在 em 中。
于 2014-02-24T08:08:20.687 回答