zoukankan html css js c++ java

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

这样移动端的图片设置：

img{    max- 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>

查看全文

相关阅读:
图像处理之霍夫变换（直线检測算法）
Linux makefile 教程很具体，且易懂
 POJ 2001 Shortest Prefixes(字典树）
android performClick使用
 Java工厂模式
 C#异步调用
 答读者问(5)：有关数学对程序猿的作用、研发工作岗位要求和实习对找工作的影响等问题
 Android系统源码导入到eclipse
开源项目与许可证
 Java实现第十届蓝桥杯矩形切割

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

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

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