rem布局移动端h5页面的前期准备工作

程序员文章站 2024-03-15 23:13:36

...

一、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
二、下面给大家提供一个通用的模版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>

三、大家都知道移动端做适配比较麻烦，一般采用rem+百分比来布局和控制字体大小,这里我直接放在rem.js文件里面，在各个页面引入即可。
（1）rem.js
rem布局移动端h5页面的前期准备工作
(2)样式重置也很重要，我这里创建一个通用common.css，因为布局我喜欢用弹性布局所以也写在通用样式里面了

/*样式重置*/
*{
	box-sizing: border-box;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,input,textarea,p,th,td,hr,
button,aside,footer,header,nav,section {margin: 0;padding: 0}
ul li{list-style: none;}
a{ text-decoration: none;}
a:active,
a:hover {
    outline: 0;
    text-decoration: none;
}
a, input, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
i{
	font-style: normal;
}
body{
	/*font-size:0.3rem;*/
	font-family:PingFang-SC-Medium;
	color: #333333;
}
.h100vh{
	height: 100vh;
}
/*flex布局*/
.d-flex{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;	
}
.flex-fill{
	flex: 1;
}
.flex-wrap{
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
.flex-direction-row{
	flex-direction: row;
}
.flex-direction-column{
	flex-direction: column;
}
.justfy-content-center{
	justify-content: center;
	-webkit-justify-content: center;
}
.justfy-content-start{
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}
.justfy-content-between{
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.justfy-content-around{
	justify-content: space-around;
	-webkit-justify-content: space-around;
}
.justfy-content-end{
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
.align-items-center{
	align-items: center;
	-webkit-align-items:center ;
}
.align-items-start{
	align-items: flex-start;
	-webkit-align-items:flex-start ;
}
.align-items-end{
	align-items: flex-end;
	-webkit-align-items:flex-end;
}

使用rem.js在页面复杂的情况下会有一瞬间的页面样式崩塌，如果适配不是要求很严格的话可以采用rem结合媒体查询代码如下

/*样式重置*/
*{box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,input,textarea,p,th,td,hr,
button,aside,footer,header,nav,section {margin: 0;padding: 0}
ul li{list-style: none;}
a{ text-decoration: none;}
a:active,a:hover { outline: 0; text-decoration: none;}
a, input, button {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
i{font-style: normal;}
body{font-family:PingFang-SC-Medium;color: #333333;}
.h100vh{height: 100vh;}
/*媒体查询*/
@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 411px){html{font-size: 54.8px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 600px){html{font-size: 79.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 768px){html{font-size: 102px;} }
@media (min-width: 1024px){html{font-size: 136px;} }
/*flex布局*/
.d-flex{
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;	
}
.flex-fill{flex: 1;}
.flex-wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;}
.flex-direction-row{flex-direction: row;}
.flex-direction-column{flex-direction: column;}
.justfy-content-center{justify-content: center;-webkit-justify-content: center;}
.justfy-content-start{justify-content: flex-start;-webkit-justify-content: flex-start;}
.justfy-content-between{justify-content: space-between;-webkit-justify-content: space-between;}
.justfy-content-around{justify-content: space-around;-webkit-justify-content: space-around;}
.justfy-content-end{justify-content: flex-end;-webkit-justify-content: flex-end;}
.align-items-center{align-items: center;-webkit-align-items:center ;}
.align-items-start{align-items: flex-start;-webkit-align-items:flex-start ;}
.align-items-end{align-items: flex-end;-webkit-align-items:flex-end;}

四、用到的一些小技巧
1、假如你需要做一个固定在最底部的按钮，不想用固定定位可以通过一下代码达到效果
(我这里的ui设计图纸是750）

body{
	height:100vh;
	background:#F7F7F7;
}
.container{
	width:7.5rem;
	height: calc(100% - 1rem);
	overflow-y:scroll;
	padding:0.3rem 0;
}
 .bottom{
     height:1rem;
 }

2、弹框（例如点击联系客服弹框显示联系方式）
html如下

	<!--遮罩层-->
    <div class="modal"></div>
	<!--点击人工客服弹框-->
	<div class="dialog">
		<div class="top">
			<p class="font1">联系客服</p>
	    	<p class="font2">客服在线时间：周一至周日8:00-20:00</p>
	    	<p class="font3">000-0000-000</p>
		</div>
		<div class="line"></div>
    	<div class="cancel">取 消</div>
    </div>

css如下

//遮罩层的阴影背景
.modal{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 500;
	top: 0px;
	background: rgba(0,0,0, 0.7);
	display: none;
}
//弹框样式
.dialog{
	width:100%;
	height:4.5rem;
	background:#ffffff;
	position:absolute;
	bottom:0rem;
	display:none;
	z-index:600;
	text-align:center;
 }
.dialog .top{
	height:3rem;
	padding:0.3rem 0;
}
.dialog .font1{
	font-size:0.32rem;
	font-weight:bold;
	color:#333;
}
.dialog .font2{
	font-size:0.3rem
	font-weight:500;
	color:#999999;
	margin-top:0.3rem;
}
.dialog .font3{
  	height:1rem;
  	line-height:1rem;
  	border-top:1px solid #EEEEEE;
  	font-size:0.35rem;
	font-weight:500;
	color:#FF5F00;
	margin-top:0.5rem;
}
.dialog .line{
	 height:0.2rem;
	 background:#EFEFEF;
}
.dialog .cancel{
	 text-align:center;
	 line-height:1.3rem;
	 font-size:0.3rem;
}

js如下

//点击客服
$('.bottom .lf').on("click",function(){
	$(".dialog").show();//控制弹框的显示
	$(".modal").show();//控制遮罩层的显示
})
//点击弹框取消
$('.cancel').on("click",function(){
	$(".dialog").hide();//控制弹框的显示
	$(".modal").hide();//控制遮罩层的显示
})

3、自定义单选框样式
rem布局移动端h5页面的前期准备工作

.radio_type{
   width: 0.4rem;
   height:0.4rem;
   -webkit-appearance: none;
   position: relative;
   outline:none;
   border: none !important;
   outline: 0 !important;
 }
.radio_type:before{
   content: '';
	width: 0.4rem;
	height:0.4rem;
    border: 1px solid #999999;
    display: inline-block;
    border-radius: 50%;
    -webkit-appearance:none;
    -webkit-border-radius:50%;
    vertical-align: middle;
}
.radio_type:checked:before{
    content: '';
	width: 0.4rem;
	height:0.4rem;
    border: 1px solid #FF5F00;
    display: inline-block;
    border-radius: 50%;
    -webkit-appearance:none;
    -webkit-border-radius:50%;
    vertical-align: middle;
}
.radio_type:checked:after{
    content: '';
	width: 0.2rem;
	height: 0.2rem;
    text-align: center;
    background:#FF5F00;
    border-radius: 50%;
    -webkit-border-radius:50%;
    -webkit-appearance:none;
    display: block;
    position: absolute;
    top: 0.12rem;
    left: 0.11rem;
}

4、自定义输出框右侧清除的图标
rem布局移动端h5页面的前期准备工作

/*自定义清除样式 好兼容*/
input[type=search]::-webkit-search-cancel-button{ 
	-webkit-appearance: none; 
	position: relative; 
	height: 0.4rem; 
	width: 0.4rem; 
	border-radius: 50%; 
	background :#EBEBEB url("../images/clear.png") no-repeat center; 
	background-size:100%; 
}

上一篇： [JavaSE复习笔记系列-05]类与对象

下一篇：原生h5 移动端浏览器判断用户所处的网络状态 (WIFI，移动流量) 很鸡肋在苹果上不支持

rem布局移动端h5页面的前期准备工作

rem布局移动端h5页面的前期准备工作

详解H5 活动页之移动端 REM 布局适配方法

详解H5 活动页之移动端 REM 布局适配方法

详解H5 活动页之移动端 REM 布局适配方法

H5 活动页之移动端 REM 布局适配方法的分析

详解H5 活动页之移动端 REM 布局适配方法

H5 活动页之移动端 REM 布局适配方法的分析