您的位置：首页 > 移动开发

如何让样式适应不同的移动端

2017-11-01 09:55 155 查看

移动端如何适应各种手机的分辨率呢

下面是我用Google Chrome浏览器的Iphone5显示的效果

当所有的数值都相同的时候

demo1.html效果如下：

demo.html的效果如下：

下面分别是demo1.html和demo.html的代码

demo1.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<title>Title</title>
<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 100%;
border: 1px #ff7567 solid;
background: #a9ff0d;
}
#div2{
position: absolute;
margin-left: 15%;
font-size: 20px;
}
#div3{
position: absolute;
margin-left: 50%;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">姓名：z</div>
<div id="div3">年龄：18</div>
</div>
</body>
</html>

demo.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
position: relative;
height: 2rem;
width: 100%;
border: 1px #ff7567 solid;
background: #a9ff0d;
}
#div2{
position: absolute;
margin-left: 15%;
font-size: 0.2rem;
}
#div3{
position: absolute;
margin-left: 50%;
font-size: 0.2rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">姓名：z</div>
<div id="div3">年龄：18</div>
</div>
</body>
<script type="text/javascript">
//1rem等于100px
var docEl = document.documentElement,
//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 100 * (docEl.clientWidth / window.screen.width) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

</script>
</html>

自己可以把上面两个html分别运行一下，用不同的显示格式试试

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航