如果要自适应大部分手机尺寸应该怎么改？

来源：11-1 实现一个完整的手机端数据展示报告

Felix_XP

2016-05-28

发现这个实例只能在iPhone5 中显示效果能达到理想，如果是其他尺寸的手机会出现各种问题，

想问一下，

如果要自适应大部分手机，应该要改哪些地方？

写回答

1回答

Lyn

2016-05-31

我们要为大部分手机定义一个范围。比如「iphone5、iphone6」^_^

iphone5：320*568

iphone6：374*677

其实这两个屏幕差别也不是很大

那么这在两种情况下，我们每个页面，都需要调整下元素的大小和定位。

---

并没有「一种」可以包打「大部分手机」的方法，把所有元素按照【屏幕的宽度百分比】或者是【字体大小】进行「大小设置」、「位置设置」是一个方法。

参考链接1

<html>
<style>
html{font-size:12px;}
p{font-size:2rem;height:20rem;background:#ccc}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍：</h1>
<p>我是html定义的12px的2倍，字体大小为24px，高度是240px</p>
</body>
<html>

参考链接2

//szimg.mukewang.com/574cf59d0001395a10010589.jpg

使用CSS MEDIA屏幕查询，在不同的屏幕宽度范围采用不同的设置也是一种方法。参考链接

@media screen and (max-width: 320px) {
    body {
        background-color:lightblue;
    }
}

Web App用组件方式开发全站

用HTML5/CSS3/JS流行技术，实现移动端可视化数据报告

3164 学习 · 516 问题

查看课程

相似问题

请问WAP页面布局跟PC上面布局有什么区别吗

回答 2

高清屏需要双倍分辨率？

回答 1

使用MarkMan标注的尾页，请老师指教~~~

回答 1

psd9的MarkMan标注

回答 1

第一次学习标注，欢迎大家评价

回答 1

打开慕课网App查看更多内容