码迷,mamicode.com
首页 > 移动开发 > 详细

移动端布局 viewport 用法 简单总结

时间:2018-09-18 19:09:38      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:rap   布局   微软雅黑   name   value   pad   tab   opacity   auto   

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
                                                    宽度等于设备宽度             缩放比例1   最小1                         最大1                         不允许用户手动缩放

这样移动端的图片设置:

img{    max-width: 100%;    vertical-align: top;} 这样属性 就不会超出屏幕宽度

div也是如此

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="0.css">

    <style>
body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend{margin:0; padding:0;}ul,li,ol{list-style:none;}img,fieldset{border:0; }img{display:block;}a{text-decoration:none; color:#333;}h1,h2,h3,h4,h5,h6{font-weight:100;}body{ font-family:"微软雅黑";}
input,a{outline:none;}
/*..0000000*/
/*html{font-size:12px;}*/
.nav ul{
    max-width:640px; 
    margin:0 auto;
display: flex;
flex-flow: row nowrap;background-color: #C51010;justify-content: space-around;
height: 6rem;

}
li{font-size: 2.5rem;color: white;text-align: center;line-height: 6rem

}
 img{
    max-width: 100%;
    vertical-align: top;
}
.main{margin: 0 auto;max-width:640px;position: relative; }
.main a:nth-child(3){
    width: 10%;height:5%;/*background-color: orange;*/display: inline-block;position: absolute;opacity: 0.9;
left: 39%;top: 93%;
}

</style>
<!-- <link rel="stylesheet" href="http://m.jjchfcyy.cn/zt2/media_screen.css"> -->
</head>
<body>



    <div class="nav">
          <ul>
       <li>首页</li>
       <li>简介</li>
       <li>科室</li>
       <li>专家</li>
       <li>路线</li>
          </ul>  
    </div>
    <div class="main">
        <a href=""><img src="http://m.jjchfcyy.cn/zt2/zt4.jpg" alt=""></a>
        <img src="http://www.jjfcyy.com/templets/mypctemp/images/1-1F4251144000-L.jpg" alt="">
         <a href="#"></a>
    </div>
</body>
</html>

 

移动端布局 viewport 用法 简单总结

标签:rap   布局   微软雅黑   name   value   pad   tab   opacity   auto   

原文地址:https://www.cnblogs.com/nice2018/p/9670268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!