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

垂直水平双向居中的弹窗 以及 移动端屏幕适配

2016-04-08 20:28 197 查看 
注意p.wrap的定位是固定定位。转载请注明网址。

1 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<meta name="MobileOptimized" content="320"/>
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate,no-siteapp"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta name="copyright" content="Copyright © nail salon 2015 | All Rights Reserved."/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<style>
html{font-size:100px;}

/* iphone 4-5 */
@media (min-device-width : 320px) and (max-device-width : 374px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 85px;}
}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 720px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 100px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {
html {
font-size: 110px;
}
}
html,body {height: 100%;}
a:hover,a:visited,a:active {text-decoration: none; }
.p_wrap{ width:100%; height: 100%;background:rgba(0,0,0,.8); position: fixed; left: 0;top: 0; z-index: 10000;}
.p_out { margin: 0 auto; height: 100%; width: 2.25rem;  overflow: hidden; position: relative; }
.p_out {display: table; position: static;}
/*.p_mid {position: absolute; top: 50%;} /!* for explorer only*!/*/
.p_mid{display: table-cell; vertical-align: middle; position: static; background: none;}
/*.p_in {position: relative; top: -50%;width: 400px;margin: 0 auto;} /!* for explorer only *!/*/
.p_in{
padding: .3rem .225rem .225rem .3rem;
-webkit-border-radius: .05rem;
-moz-border-radius: .05rem;
-ms-border-radius: .05rem;
-o-border-radius: .05rem;
border-radius: .05rem;
background: #fff;
}
.p_in p {
text-align: center;
font-size: .12rem;
line-height: .25rem;
}
.p_in a {
display: block;
margin-top: .2rem;
-webkit-border-radius: .05rem;
-moz-border-radius: .05rem;
-ms-border-radius: .05rem;
-o-border-radius: .05rem;
border-radius: .05rem;
height: .3rem;
line-height: .3rem;
text-align: center;
font-size: .12rem;
}
a.p_single {
margin: 0 auto;
width: 1.6rem;
color: #fff;
background: #91c33e;
border: 1px solid #91c33e;
}
.p_two a {
width: .7rem;
border: 1px solid #333;
}
.p_two a.cur {
border: 1px solid #91c33e;
background: #91c33e;
color: #fff;
}
</style>
</head>
<body>
<div class="p_wrap">
<div class="p_out">
<div class="row p_mid">
<div class=" p_in" >
<p>弹出文案弹出文案</p>
<div>
<a class="p_single" href="javascript: void(0);">确 定</a>
</div>
<!--
<div class="p_two clearfix">
<a class="p_left fl" href="javascript:void(0);">换个技师</a>
<a class="p_right fr cur" href="javascript:void(0);">确定</a>
</div>
-->
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航