百分比布局

最新推荐文章于 2024-01-23 12:48:53 发布

是瑞瑞小甜心

最新推荐文章于 2024-01-23 12:48:53 发布

阅读量84

点赞数

分类专栏：布局文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45998542/article/details/121844430

版权

布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

流式布局

流式布局即百分比布局

视口

国内移动端浏览器大多根据webkit内核修改

视口就是浏览器显示页面内容的屏幕区域，布局视口（980），视觉视口（区域），理想视口

   <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 http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- width 宽度设置的是viewport宽度，可以设置device-width特殊值 -->
    <!-- initial-scale 初始缩放比，大于0的数字 -->
    <!-- maximum-scale 最大缩放比，大于0的数字 -->
    <!-- minimum-scale 最小缩放比，大于0的数字 -->
    <!-- user-scalable 用户是否可以缩放，yes或no（1或0） -->

C3盒子模型

 box-sizing: border-box;
 /*在移动端可以全部使用；PC端如果考虑兼容性问题，依旧选用传统盒子模型 */

二倍图

/* 1. 物理像素就是分辨率 */
/* 2. 电脑端1px开发像素=1个物理像素，手机端不一定（视网膜屏幕），因此需要多倍图做法，可以通过cutterman切多倍图  */
/* 二倍图：放一个 100* 100 图片，手动的把这个图片缩小为 50* 50 （css像素） */
    <style>
        .background-size {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* 1.background-size: 图片的宽度 图片的高度; */
            background-size: 500px 200px;
            /* 2.只写一个参数就是宽度，高度会等比例缩放 */
            background-size: 500px;
            /* 3. 里面的单位可以跟%，是相对于父盒子来说的 */
            background-size: 50%;
            /* 4. cover 等比例拉伸至完全覆盖div盒子，可能有部分背景图片显示不全 */
            background-size: cover;
            /* 5. contain 等比例拉伸至宽度或者高度铺满div盒子就不再进行拉伸了，可能有部分空白区域 */
            background-size: contain;
        }
           /* 50*50的盒子放背景图片，需要准备2倍100*100的图片，通过background-size再将图片缩放一半50*50 */
        
        .erback {
            width: 50px;
            height: 50px;
            background-image: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
       
        section {
            width: 100%;
            /* 防止盒子过大或过小改变布局 */
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="img">
        <!-- 模糊的 -->
        <img src="images/apple50.jpg" alt="">
        <!-- 2倍图 -->
        <img src="images/apple100.jpg" alt=""></div>
    <div class="background-size"></div>
    <div class="erback"></div>
    <a href="#">秦瑞</a>
    <input type="button" value="按钮">
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

特殊样式

    a {
        -webkit-tap-highlight-color: transparent;
        /*1. 清除链接高亮 */
    }
    
    input {
        -webkit-appearance: none;
        /* 2.清除ios自带的默认按钮输入框样式 */
    }
    
    img a {
        -webkit-touch-callout: none;
        /* 清除长按页面弹出菜单 */
    }

是瑞瑞小甜心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百分比布局

流式布局流式布局即百分比布局视口国内移动端浏览器大多根据webkit内核修改视口就是浏览器显示页面内容的屏幕区域，布局视口（980），视觉视口（区域），理想视口 <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, u
复制链接

扫一扫