前端CSS3-12

最新推荐文章于 2022-06-03 15:54:09 发布
最新推荐文章于 2022-06-03 15:54:09 发布
阅读量247 收藏
点赞数
分类专栏： 笔记 学习 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53950248/article/details/119251083
版权

目录

弹性元素上的样式

设置弹性盒

弹性的增长系统

弹性元素的增减系统

元素基础长度

flex 

order  

淘宝导航

 像素

像素

视口（viewport）

移动端

移动端页面

视口

vw适配

 rem

移动端页面

 响应式布局

响应式布局

使用媒体查询

媒体查询简介

媒体特性

 断点

美图手机左侧图标

弹性元素上的样式

设置弹性盒

display: flex;

弹性的增长系统

flex-grow: 1;

弹性元素的增减系统

                    -增减系统的计算方法比较复杂

                    -增减多少是根据 增减系数 和 元素大小 来计算

flex-shrink: 1;

元素基础长度

                flex-basis 指定的是元素在主轴上的基础长度

                    如果主轴是 横向的 则 该值指定的就是元素的宽度

                    如果主轴是 纵向的 则 该值指定的是就是元素的高度

                    -默认值是 auto,表示参考元素自身的高度或宽度

                    -如果传递了一个具体的数值，则以该值为准 

flex-basis:auto;

flex 

                可以设置弹性元素所有的三个样式

                    flex 增长 缩减 基础

                        initial *flex: 0 1 auto*

                        auto *flex:1 1 auto*

                        none:*flex:0 0 auto* 弹性元素没有弹性

order  

               决定弹性元素的排列顺序

li:nth-child(1){
            order: 3;
        } 
        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
        }
        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            order: 1;

淘宝导航

<body>
    <!-- 创建一个外层的容器 -->
    <nav class="nav">
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/1.png">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/2.png">
                    <span>聚划算</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/3.png">
                    <span>天猫国际</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/4.png">
                    <span>外卖</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/5.png">
                    <span>天猫超市</span>
                </a>
            </div>

        </div>
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/6.png">
                    <span>充值中心</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/7.png">
                    <span>飞猪旅行</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/8.png">
                    <span>领金币</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/9.png">
                    <span>拍卖</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/10.png">
                    <span>分类</span>
                </a>
            </div>

        </div>
    </nav>
</body>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 设置外层的容器 */
        .nav{
            width: 100%;

        }
        /* 设置每一行的容器 */
        .nav.inner{
            /* 设置为弹性容器 */
            display: flex;
            /* 设置主轴上空白的分布 */
            justify-content:space-around;
        }
        .item{
            width: 15%;
            background-color: #bfa;
            /* flex: auto; */
        }
        .item img{
            /* 设置图片的宽度和父元素宽度一样 */
            width: 100%;
        }
        .item a{
            color: #333;
            text-decoration: none;
            font-size: 16px;
            
        }
    </style>

 像素

像素

        -屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

        分辨率：1920×1080  说的就是屏幕中小点的数目

        -在前端开发中像素要分成两种情况讨论，CSS像素 和 物理像素

        -物理像素，上述所说的小点点就属于物理像素

        -CSS像素，编写网页时，我们所用像素都是CSS像素

            -浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现、

            -一个CSS像素最终由几个物理像素显示，由浏览器决定

                默认情况下在pc端，一个css像素=一个物理像素

视口（viewport）

            -视口就是屏幕中用来显示网页的区域

            -可以通过查看视口的大小，来观察CSS像素和物理像素的比值

            -默认情况下，

                视口宽度 192px(CSS像素)

                        192px(物理像素)

                        -此时，css像素和物理像素的比是1：1

            -放大两倍的情况，

                视口宽度 960px (css像素)

                        1920px (物理像素)

                        -此时，css像素和物理像素的比是1：2

            -我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

移动端

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

            24寸 1920×1000

            16.4寸 750×1334

            智能手机的像素点 远远小于 计算机的像素点

            问题：一个宽度为900px的网页在iphone6中如何显示？

            默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）

                以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，

                    移动端的浏览器会自动对网页缩放以完整显示网页

            所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验

                为了解决这个问题，大部分网站都会专门为移动端设计网页。

移动端页面

设置视口大小 device-width 表示设备的宽度（完美视口）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端默认的视口大小是980px（css像素）

            默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）

            如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，

                    导致网页中的内容非常非常小

            编写移动页面时，必须要确保有一个比较合理的像素化

                1css像素 对应 2个物理像素

                1css像素 对应 3个物理像素

            -可以通过meta标签来设置视口大小

            -每一款移动设备设计时，都会有一个最佳的像素比

               一般我们只需要将像素比设置为该值即可得到一个最佳效果

               将像素比设置为最佳像素比的视口大小我们称其为完美视口

               将网页的视口设置为完美视口

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                结论，以后再写移动端的页面，就把上边这个玩意先写上

视口

不同的设备完美视口的大小是不一样的

                iphone6--375

                iphone6 plus--414

        

        由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的

                比如在iphone6中，375就是全屏，而到了plus中375就会缺一块

            

        所以在移动端开发时，就不会再使用px来进行布局了

    

        vw表示的是视口的宽度 （viewport width）

            -100vw 一个视口的宽度

            1vw-1%视口宽度

        

            vw这个单位永远相当于视口进行计算

        

        设计图的宽度

            750px 1125px

        

        设计图

            750px

        

        使用vw作为单位

            100vw

        

        创建一个48px × 35px大小的元素

    

        100vw =750px(设计图的像素)

        6.4vw=48px(设计图像素)

        4.667vw=35px

 .box1{
            width: 6.4vw;
            height: 4.667vw;
}

vw适配

网页中字体大小是12px，不能设置一个比12像素还小的字体

                如果我们设置了一个小于12px的字体，则字体自动设置为12    

                0.133333vw=1p

                1.133333vw=10px     

                5.3333vw=40px

font-size: 1.1333333333333vw；

 rem

                    -1 rem=1 html的字体大小

                    -1 rem=40px (设计图)

width: 1.2rem;
height: 0.875vw;

移动端页面

<title>爱学习</title>
    <link rel="stylesheet"href="./fa/css/all.min.css">
    <link rel="stylesheet"href="./css/style.css">
</head>
<body>
    <!-- 创建头部的容器 -->
    <header class="top-bar">
        <div class="menu-btn">
            <a href="#">
                <i class="fas fa-stream"></i>
            </a>
        </div>
        <h1 class="logo">
            <a href="#">
                爱学习
            </a>
        </h1>
        <div class="search-btn">
            <a href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
    </header>
    <!-- banner -->
    <div class="banner">
        <a href="#">
            <img src="./img/17/banner.png"alt="">
        </a>
    </div>
    <nav class="menu">
        <a class="course"href="#">
            <i class="fas fa-book"></i>我的课程</a>
        <a class="star"href="#">
            <i class="fas fa-cut"></i>明星讲师</a>
        <a class="sub"href="#">
            <i class="fas fa-envelope"></i>我的订阅</a>
        <a class="download"href="#">
            <i class="fas fa-globe"></i>我的下载</a>
    </nav>
    <!-- 课程列表 -->
    <div class="course-list">
        <!-- 列表的标题 -->
        <div class="title">
            <h2>最新课程</h2>
            <a class="more"href="#">更多</a>
        </div>
        <div class="items-list">
            <!-- 列表容器 -->
            <div class="item-list">
                <div class="item">
                    <!-- 封面 -->
                    <div class="cover">
                        <img src="img/17/cover.png"alt="">
                    </div>
                    <!-- 小标题 -->
                    <h3 class="course-title">
                        摄影课程
                    </h3>
                    <!-- 用户信息 -->
                    <div class="user-info">
                        <div class="avatar">
                            <img src="img/17/avator.png"alt="">
                        </div>
                        <div class="nickname">
                            令狐冲
                        </div>
                         <!-- 封面 -->
                    <div class="cover">
                        <img src="img/17/cover.png"alt="">
                    </div>
                    <!-- 小标题 -->
                    <h3 class="course-title">
                        摄影课程
                    </h3>
                    <!-- 用户信息 -->
                    <div class="user-info">
                        <div class="avatar">
                            <img src="img/17/avator.png"alt="">
                        </div>
                        <div class="nickname">
                            令狐冲
                        </div>
                        <div class="item">
                            <!-- 封面 -->
                            <div class="cover">
                                <img src="img/17/cover.png"alt="">
                            </div>
                            <!-- 小标题 -->
                            <h3 class="course-title">
                                摄影课程
                            </h3>
                            <!-- 用户信息 -->
                            <div class="user-info">
                                <div class="avatar">
                                    <img src="img/17/avator.png"alt="">
                                </div>
                                <div class="nickname">
                                    令狐冲
                                </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
*{
    margin: 0;
    padding: 0;
}
@total-width:750;
.w{
    width: 693/40rem;
    margin: 0 auto;
}
//设置根元素
html{
    //设置rem的比值
    font-size: 100vw/@total-width*40;
    background-color: #eff0f4;
}
//设置头部header
.top-bar{
    //设置弹性容器
    display: flex;
    //设置宽度
    width: @center-width;
    //设置高度
    height: 175/40rem;
    //设置对齐方式
    justify-content: space-between;
    //设置辅助的对齐方式
    align-items: center;
    a{
        color: #24253d;
        font-size: 50/40rem;

        i{
            color: #999;
            font-size:40/40rem;
        }
    }
}
//设置banner
.banner:extend(.w){
    img{
        width: 100%;
    }
}
//设置中间菜单
.menu:extend(.w){
    //确定元素的高度
    height: 329/40rem;
    background-color: #bfa;
    //设置弹性元素
    display: flex;
    //设置换行
    flex-flow: row wrap;
    //设置对齐方式
    justify-content: space-between;
    //设置辅轴的对齐方式
    align-content: space-between;
    //设置框的大小
    .a{

        width: 327/40rem;
        height: 104/40rem;
        line-height: 104/40rem;
        color: white;
        border-radius: 10/40rem;

        i{
            margin: 0 32/40rem 0 38/40rem;
        }
    }
    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .sub{
        background-color: #fe4479;
    }
    .download{
        background-color: #1bc4fb;
    }
    
}
//设置课程列表
.course-list:extend(.w){
    height: 438/40rem;
    display: flex;
    flex-flow:column;
    justify-content: space-between;
    margin-bottom: 46/40rem;
    .title{
        display: flex;
        //主轴的空间
        justify-content: space-between;
        //辅轴的对齐方式
        align-items: center;

        h2{
            font-size: 33/40rem;
            color: #24253d;
            border-left: 2px solid #3a84ff;
            padding-left: 4px;
        }
        a{
            font-size: 28/40rem;
            color: #656565;
        }
    }
}
//设置课程列表的项
.item-list{
    width: 720/40rem;
    display: flex;
    overflow: auto;
}
.item{
    flex: none;
    width: 320/40rem;
    height: 324/40rem;
    padding:0 22/40rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    align-content: space-evenly;
    margin-right: 24/40rem;
    
    //设置图片的宽度
    img{
        width: 100%;
        vertical-align: top;
    }
    //课程标题
    .course-title{
        font-size: 32/40rem;
        color: #24253d;
    }
    //设置用户信息的容器
    .user-info{
        display: flex;
        align-items: center;
    }
    //头像
    .avator{
        width: 42/40rem;
        height: 42/40rem;
    }
    //用户的昵称
    .nickname{
        margin-left: 6px;

    }
}

最终效果：

 响应式布局

响应式布局

            -网页可以根据不同的设备或窗口大小呈现出不同的效果

            -使用响应式布局，可以使一个网页适用于所有设备

            -响应布局的关键就是 媒体查询

            -通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

使用媒体查询

            语法：@media 查询规则{}

                all  所有设备

                print 打印设备

                screen  带屏幕的设备

                speech 屏幕阅读器

                    -可以使用，连接多个媒体类型，这样它们之间就是一个或的关系

                    

                可以在媒体类型前添加一个only 表示只有

                    only的使用主要是为了兼容一些老版本浏览器

 @media only screen{
                    body{
                        background-color: #bfa;
                    }
                }

媒体查询简介

媒体特性

        width 视口的宽度

        height 视口的高度

        

        min-width 视口的最大宽度(视口大于指定宽度时生效)

        max-width 视口的最小宽度（视口小于指定宽度时生效）

@media(max-width:500px){
            body{
                background-color: #bfa;
            }

 断点

样式切换的分景点，我们称其为断点，也就是网页的样式会在这个点时发生变化

        一般比较常用的断点

小于768 超小屏幕 max-width=768px

        大于768 小屏幕 min-width=768px

        大于992 中型屏幕 min-width=992px

        大于1200 大屏幕 min-width=1200px

@media only screen and (min-width:500px)and(max-width:700px){
            body{
                background-color: #bfa;
            }
        }

美图手机左侧图标

<body>
    <!-- 
        响应式设计的网页，
            ①移动端优先
            ②渐进增强

     -->
     <!-- 外部容器 -->
     <div class="top-bar-wrapper">
     <div class="top-bar">
         <div class="left-menu">
            <!-- 创建菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 创建菜单 -->
            <ul class="nav">
                <li><a href="#">手机</a></li>
                <li><a href="#">美容仪器</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">企业网络</a></li>
                <li><a href="#">
                    <i class="fas fa-search"></i>
                </a>
            <span>
                搜索 Meitu.com</Meitu>
            </span></li>
            </ul>
         </div>
         <!-- logo -->
         <h1 class="logo"></h1>
            <a href="/">美图手机</a>
         <!-- 用户信息 -->
         <div class="user-info">
            <a href="#">
                <i class="fas fa-user"></i>
            </a>
         </div>
     </div></div>
</body>
//导航条的外部容器
.top-bar{
    height: 48px;
    padding:0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #000;
}
//设置左侧的导航图标
.item-meun{
    //显示隐藏的菜单
    .nav{
        display: block;
    }
    position: relative;
    //设置菜单
    .nav{
       position: absolute; 
       top: 48px;
       left: 0;
       bottom: 0;
       right: 0;
       //设置背景颜色
       background-color: #000;
       padding-top: 60px;

       li{
           width: 88%;
           margin: 0 auto;

           a{
               display: block;
               line-height: 44px;
               font-size: 14px;
               border-bottom: 1px solid #757474;
           }
           &:last-child a{
               display: inline-block;
           }
           span{
               color: #fff;
               font-size: 14px;
           }
       }
    }
    
    .menu-icon{
        background-color: #bfa;
        width: 10px;
        height: 4px;

        li{
            width: 18px;
            height: 1px;
            background-color: #000;
            position: relative;
        
            //导航的线
            li{
                width: 18px;
                height: 1px;
                background-color: #fff;
                position: absolute;

                //修改变形的原点
                transform-origin: left center;

                transition: 0.5s;
            }
        li:nth-child(1){
            top: 18px;
        }
        li:nth-child(2){
            top: 24px;
        }
        li:nth-child(3){
            top: 30px;
           
        }
        //鼠标移入以后的效果，正常项目时，效果需要通过js实现
        &:hover{
            
            li:nth-child(1){
                //向下旋转
                transform: rotateZ(40deg);
            }
            li:nth-child(2){
                //隐藏
                opacity: 0;
            }
            li:nth-child(3){
                transform: rotateZ(-40deg);
            }
        }
    }
}
}
//设置logo
.logo{
    a{
        text-indent: -9999px;
        display: block;
        width: 244px;
        height: 64px;
        background-image: url('../img/dff63979.sprites-index@2x.png');
        background-size: 400px 400px;
    }
}
//设置媒体查询
@media only screen{
    //断点 768px
    @media (min-width:768px){
        .left-menu{
            order: 2;
            //显示菜单
            .nav{
                display: block;
                position: static;
                padding:0;
                justify-content: space-around;
                li{
                    width: auto;
                    border-bottom: none;
                }
                a{
                    line-height: 48px;
                }
                span{
                    display: none;
                }
            }
            //隐藏菜单图标
            .menu-icon{
                display: menu;
            }
        }
        .logo{
            order: 1;
        }
        .user-info{
            order: 3;
        }
    }}

画个圈圈诅咒你 yebo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中搜索栏中的搜索图标(以及其他各种图标）怎么写？Fontawesome
xiaobaityq的博客
08-29 1546
一、推荐网站 可能大家刚写js时，遇到一些需要用的图标，会上网去搜图片，然后ps。。。其实，有一个很好的网站已经为我们设计好了所有的（几乎你需要用的）所有图标。有很多这样的网站：fontawesome、ionicons、google icons，IconFont。作为新手来讲，今天给大家推荐fontawesome（第二部分，会介绍一个使用fontawesome的实例）。先给大家推荐两个网站： ...
【web前端HTML5+CSS3】09CSS--layout（布局）之 flex （弹性盒）
weixin_58214412的博客
02-27 655
目录 1.弹性盒子简介 2.京东导航条练习 3.弹性容器上的样式 4.弹性元素上的样式 5.淘宝导航练习 6.像素 7.移动端像素 8.完美视口 9.vw单位 10.vw适配 11.移动端页面练习 12.媒体查询简介 13.响应式布局 14.美图手机练习
前端设计小图标显示成方块，字体不起作用
weixin_43814775的博客
10-25 1480
我们做设计页面的时候会用一些小图标来美化 但是用了图标可是刷出来的页面有小方块，没显示出我们想要的图标 小图标网站（Font Awesome） 从这个网址里搜索我想要的小图标，之后把代码粘贴到相关程序 <i class="fas fa-search"></i> //会出现小方块，Error! 这时候我们在添加 fa,结果可想而知，okay了！ (必须有两个类，f...
前端JS-20
画个圈圈诅咒你 的博客
09-26 120
滚轮的事件
响应式布局媒体查询
qq_41309350的博客
01-21 254
css中媒体查询是什么？怎么使用？ 媒体查询限制CSS样式的范围，以便仅在满足某些媒体条件时才适用。 简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。 媒体查询可用于检测的媒体特性，比如： width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询具体使用 @media [not | only] [and] (); @media screen { body{
前端css实例--图片切片动效
12-15
跟大家分享一些原生css的实际例子，这些例子比较简单，但都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~ 前端css图片切片动效讲解，包含老师录屏图片切片动效讲解、css源码、html、PDF显示。
前端HTML----CSS动画特效
04-14
文件格式CSS 特效详情如下： ====进入==== 淡入：fadeIn 翻转进入：flipInY 中心弹入：bounceIn 中心放大：zoomIn 翻转进入：rollIn 光速进入：lightSpeedIn 移入，从左向右：fadeInLeft 移入，从上向下：...
前端学习代码之-css3
04-12
在前端开发领域，CSS3（层叠样式表第三版）是不可或缺的一部分，它极大地扩展了网页设计的可能性，提供了丰富的样式控制和动态效果。本资源包“前端学习代码之-css3”旨在帮助初学者和进阶者通过实践来掌握CSS3的...
前端开源库-postcss-variables
08-29
总的来说，PostCSS 变量通过 `postcss-simple-vars` 插件为前端开发者提供了更灵活和强大样式管理手段，使得 CSS 代码更加整洁、易于维护，同时也保持了良好的浏览器兼容性。熟练掌握 PostCSS 变量的使用，能够显著...
前端项目-css3-animate-it.zip
09-03
【前端项目-css3-animate-it.zip】是一个专注于前端开发的资源包，主要利用CSS3和jQuery技术来实现元素在进入浏览器视口时的动画效果。这个项目对于提升网站用户体验和视觉吸引力有着显著的作用，尤其适用于现代网页...
HTML/CSS日记（十二）完
Tml的博客
06-03 224
弹性盒flex：CSS中的有一种布局手段，主要用于代替浮动来完成页面的布局。可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器 弹性元素：弹性容器的直接子元素是弹性元素（弹性项），弹性元素可以同时是弹性容器。给弹性容器设置的属性：flex-direction，指定容器中弹性元素的排列方式。可选值：row，默认值，从左向右排列；row-reverse，从右向左排列；column，从上向下排列；column-reverse，从下向上排列。主轴：弹性
HTML+CSS之如何找BUG
关注我！带你一路 "狂飙" 到底！
12-01 316
打开控制台方式有两种，一种在浏览器中点击鼠标右键，选择检查，如下图。我们要取消第一个或者最后一个的边框，我们给第一个或最后一个li加class名取消边框，发现取消不了，而且属性和属性值检查了一遍是对的，在控制台中也显示了，只不过被划掉了（注意只是划掉，但没有黄色感叹号），这个时候可能是选择器权重不够。很多刚进入前端行业的小伙伴在写页面的时候，很容易出现错误，这时候很多小伙伴就会一行行查看自己的代码哪里有问题，或者仔细的对比网上代码，这样查看错误很浪费时间，而且陷入了自己的思维里面看不出错误在哪里。
关于VScode中easy-less插件1.7.0以上转译的问题
YMY_SZY的博客
03-18 618
本文旨在说明vscode中的easy-less插件在1.70版本以上出现的一个编译的问题 近日在实现一个移动端的页面的案例的时候，使用vscode上的easy-less插件对css文件进行转译，对照案例是相同的代码，相同的运行环境，相同的浏览器，但是实际效果差很多，很多页面上的元素的宽和高并未实现，导致整个页面布局出现重大问题 后经过查验，发现了easy-less的一个问题： 正常情况下在less文件中所写的有关计算的公式在css文件中应该被计算出来，但是**1.7.0（包含1.7.0）**以上的版本在对l
CSS中适配移动端完美视口像素记录
Voiceu的博客
11-24 415
拿iPhone6为例，ip6的物理像素是750px（均指宽度），查询得知完美适口的比例为2，即750px（物理像素）：375px（CSS像素） = 2：1 那么在电脑端制作一张宽为375px（CSS像素）的图片，加载到移动端，就可以充满屏幕，前提是meta设置为 meta name=“viewport” content="width=device-width <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
前端CSS3-11
画个圈圈诅咒你 的博客
07-25 93
复仇者联盟
css3vw适配_css3新单位vw、vh的使用详解
weixin_29026387的博客
01-14 903
响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。比如：(function (doc, win) {let docEl = doc.documentElementlet resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'let recalc = ...
CSS3自适应字体大小(vw vh)
dayanwu2842的博客
05-04 524
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 ...
前端css first-child 用法
最新发布
09-29
:first-child选择器用于选中某个元素的第一个子元素。可以通过以下方式使用:first-child选择器： .parent :first-child { /* 在parent元素中选中第一个子元素 */ } 注意，:first-child选择器选中的是符合条件的第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值