下面是“vue移动端html5页面根据屏幕适配的四种解决方法”的完整攻略。
1. 常规解决方案
步骤说明
- 使用
<meta>设置视口宽度，例如：<meta name="viewport" content="width=device-width,initial-scale=1.0"> - 使用媒体查询（
@media）设置样式，例如：@media screen and (max-width: 640px) {...}
实例说明
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {
font-size: 16px;
}
@media screen and (max-width: 640px) {
body {
font-size: 14px;
}
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
2. 使用flexible.js方案
步骤说明
- 引入flexible.js文件到项目中
- 在根组件中设置
data-dpr和data-scale属性，例如：<div id="app" data-dpr="1" data-scale="1"></div> - 在js代码中执行
flexible的初始化操作，例如：flexible.init()
实例说明
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/amfe-flexible/2.2.1/index.min.js"></script>
<style>
body {
font-size: 14px;
}
</style>
</head>
<body>
<div id="app" data-dpr="1" data-scale="1">Hello World!</div>
<script>
flexible.init()
</script>
</body>
</html>
3. 使用rem解决方案
步骤说明
- 引入flexible.js文件到项目中
- 在根组件中设置
data-dpr和data-scale属性，例如：<div id="app" data-dpr="1" data-scale="1"></div> - 在css文件中设置根元素
font-size的值为37.5px - 其他元素的样式可以使用
rem单位
实例说明
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/amfe-flexible/2.2.1/index.min.js"></script>
<style>
html {
font-size: 37.5px;
}
body {
font-size: 0.14rem;
}
</style>
</head>
<body>
<div id="app" data-dpr="1" data-scale="1">Hello World!</div>
</body>
</html>
4. 使用vw和vh解决方案
步骤说明
- 在css文件中使用
vw和vh来设置元素的大小和位置
实例说明
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {
font-size: 16px;
}
.container {
width: 80vw;
height: 50vh;
}
.box {
width: 20vw;
height: 10vh;
margin: 5vw 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
以上就是“vue移动端html5页面根据屏幕适配的四种解决方法”的完整攻略。希望对你有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue移动端html5页面根据屏幕适配的四种解决方法 - Python技术站
微信扫一扫 
支付宝扫一扫 