01-移动端web开发-流式布局

最新推荐文章于 2024-07-24 23:00:08 发布

pacong

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量83

点赞数

分类专栏： html+css 文章标签：前端 css html

本文链接：https://blog.csdn.net/pacong/article/details/130201567

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

01-meta视口标签

在这里插入图片描述


<head>
    <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">
    <title>Document</title>
</head>

<body>
    要用移动端来看我哦
</body>

02-物理像素比

在这里插入图片描述

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        /* 1. 物理像素 就是我们说的分辨率  iPhone8的物理像素是 750 */
        /* 2. 在 iPhone8里面  1px 开发像素  =  2个物理像素  */
    </style>
</head>

<body>
    <div></div>
</body>

03-二倍图做法

我们在准备图片的的时候要准备两倍的图片，在用的时候在缩小两倍
在这里插入图片描述

04-背景缩放background-size

在这里插入图片描述

 <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 200px; */
            /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
</body>

05-背景图片2倍图

Cutterman(ps切图插件)
在这里插入图片描述

<style>
        /* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50  background-size*/
        
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

05.1-移动端开发选择

在这里插入图片描述

单独制作

在这里插入图片描述

响应式布局

在这里插入图片描述

06-CSS3盒子模型

在这里插入图片描述

<style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
            box-sizing: content-box;
        }
        
        div:nth-child(2) {
            /* 有了这句话就让盒子变成CSS3盒子模型 */
            /* padding 和 border 不会再撑大盒子了 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            border: 10px solid blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

07-特殊样式

在这里插入图片描述

 <style>
        a {
            -webkit-tap-highlight-color: transparent;
        }
        
        input {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <a href="#">黑马</a>
    <input type="button" value="按钮">
</body>

08-流式布局

流式布局主要看的是宽度
在这里插入图片描述

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        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>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

pacong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
01-移动端web开发-流式布局

* 4. contain 高度和宽度等比例拉伸当宽度或者高度铺满div盒子就不再进行拉伸了可能有部分空白区域 *//* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100 *//* 2. 我们需要把这个图片缩放一半，也就是 50*50 background-size*//* 1. 物理像素就是我们说的分辨率 iPhone8的物理像素是 750 *//* 2. 里面的单位可以跟% 相对于父盒子来说的 */
复制链接

扫一扫

专栏目录