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

Posted 2021-01-07 nice2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端布局 viewport 用法简单总结相关的知识，希望对你有一定的参考价值。

这样移动端的图片设置：

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 用法简单总结的主要内容，如果未能解决你的问题，请参考以下文章

移动端布局最佳实践（viewport+rem）

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

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