前端之移动web开发学习

最新推荐文章于 2022-12-21 17:35:32 发布

我是真的垃圾啊

最新推荐文章于 2022-12-21 17:35:32 发布

阅读量320

点赞数 2

本文链接：https://blog.csdn.net/fujiaxu666/article/details/120689657

版权

前端学习同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

移动端浏览器的现状

移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。

手机屏幕现状

做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px

物理像素比

参考博客

移动端的调试方法

在这里插入图片描述

视口

视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。

布局视口（layout viewport）

在这里插入图片描述

视觉视口（visual viewport）

在这里插入图片描述

理想视口（ideal viewport）

在这里插入图片描述

meta视口标签

<!--推荐写法
宽度是设备宽度
初始缩放比是1.0
不允许用户缩放
最大和最小缩放比是1.0
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0 ueser-scalable=no, maximun-scale=1.0, minimum-scale=1.0">

在这里插入图片描述

二倍图

物理像素和物理像素比

物理像素就是手机的分辨率
在这里插入图片描述
比如1px显示2个物理像素，那么物理像素比就是2。

在这里插入图片描述

多倍图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        我们需要一个50*50像素（css）像素的图片，如果直接放到iphone8里面会被放大两倍
        100*100 就会变得模糊了（文字也就是矢量图不会模糊）

        所以我们需要采取一种策略，放一张100*100图片 然后手动把这张图片缩小为50*50（css像素）

        这就是二倍图
        */
    </style>
</head>
<body>
    
</body>
</html>

背景缩放（background-size）

只写一个，那么肯定是width，height等比例。可以写%，相对于父盒子来说的
background-size: width height
background-size: cover 先拉伸宽度，再有右下角拉伸，可能显示不全。
background-size:contain高度和宽度等比例拉伸，当高度或者高度铺满盒子就不在进行拉伸了。可能会有部分空白区域。

CSS3盒模型（IE盒模型也就是怪异盒模型）

在移动端放心使用
在这里插入图片描述

移动端上的特殊样式

在这里插入图片描述

移动端的常见布局

移动端的技术选型

在这里插入图片描述

流式布局（百分比布局）

重点就是盒子的宽度使用百分比来设置的。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            width: 100%;
        }
        div {
            width: 50%;
            height: 400px;
            float: left;
        }
        section div:nth-child(1){
            background-color: pink;
        }
        section div:nth-child(2){
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
</html>

但是为了保证盒子里面的内容的显示效果，我们会加入两个属性:
max-width : 最大宽度
min-width: 最小宽度
height也是同理

流式布局的案例（m.jd）

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口需要重新设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=none,
    maximum-scale=1.0, minimum-scale=1.0 ">
    <title>m.jd</title>
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- m.jd采用的是流式布局 -->

    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="./images/close.png" alt="">
            </li>
            <li>
                <img src="./images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul> 
    </header>

   
    <!-- 主体内容部分 -->
    <div class="mainContent">
         <!-- 搜索 -->
        <div class="search-wrap">
            <div class="search-btn"></div>
            <div class="search">
                <div class="jd-icon"></div>
                <div class="sou"></div>
             </div>
             <div class="search-login">登录</div>
        </div>
       
        <!-- 滑动图 -->
       <div class="slider">
            <img src="./upload/banner.dpg" alt="">
       </div>
       <!-- 品牌日 -->
       <div class="brand">
           <!-- 跳转使用JavaScript实现 -->
           <div><img src="./upload/pic1.dpg" alt=""></div>
           <div><img src="./upload/pic2.dpg" alt=""></div>
           <div><img src="./upload/pic3.dpg" alt=""></div>
       </div>
    </div>
    <!-- 导航栏 -->
    <nav>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
        <a href=""><img src="./upload/nav1.webp" alt=""><span>京东超市</span></a>
    </nav>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
}
body {
    width: 100%;/* 注意这个 */
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;/* 因为设置的最大的宽度，所以100%不一定是居中的 */
   /*  background: #666; */
    font-size: 14px;
    font-family: -apple-system,Helvetica,sans-serif;
    color: #666;
    line-height: 1.5;/* 字体大小*1.5也就是21px */
   height: 2000px;
}
.app {
    height: 45px;
    /* background-color: #bfa; */
}
.app ul li {
    float: left;
    height: 45px;
    list-style: none;
    background-color: #333;
    line-height: 45px;
    text-align: center;/* 图片相当于是一个文字，所以可以用text-align: center */
    color: #fff;
}
.app ul li:nth-child(1){
    width: 8%;
    
}
.app ul li:nth-child(1) img{
    width: 10px;
    vertical-align: middle;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle ;/* 这里还需要看看博客，为什么设置图片为什么设置了ling-height之后还需要设置这个 */
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background-color: #f63515;
}
.mainContent{
    position: relative;
}

/* 搜索部分 */
.search-wrap {
    height: 44px;
    position: absolute;
    overflow: hidden;/* 开启BFC，防止外边距塌陷 */
    /* 因为固定定位，所以要给宽，相对定位不会有这个问题，因为相对定位不会脱离文档流 */
    width: 100%;
}   
.search-btn{
    position: absolute;
    top: 0;/* 为什么要是要浮动而不是用定位呢？那是因为中间有一个搜索框不能浮动 */
    width: 40px;
    height: 44px;
}
.search-btn::before{
    content: '';
    display: block;/* 因为是行内元素 */
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search{
    height: 30px;
    margin: 7px 50px 0  50px;
    border-radius: 15px;
    background-color: #fff;
    position: relative;
}
.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    color: #fff;
}
.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    content: '';
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
    position: absolute;
    right: -8px;
}
.sou {
    width: 18px;
    height: 15px;
    background-color: #bfa;
    position: absolute;
    top: 8px;
    left: 50px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;/* 这里是二倍精灵图的做法 */
    background-size: 200px;

}
.slider img {
    width: 100%;
    vertical-align: bottom;/* 放图片的时候一定不要忘记这个，要不然会与基线对齐的，会有空白缝隙出现 */
}
.brand {
    /* position: absolute; *//* 绝对定位的元素如果不给定方位，会呆在原地 */
    border-radius: 10px 10px 0 0;
    margin-top: -7px;
    overflow: hidden;/* 因为设置了圆角，会有图片溢出来 */
}
.brand div {
    float: left;
    width: 33.333333333333333333%;/* 注意这里是33.33*/
}
 .brand img{
    width: 100%;/* 注意这里是100*/
    vertical-align: bottom;
}
nav a {
    float: left;
    width: 20%;
   /*  border: 1px solid red; */
    text-align: center;
    text-decoration: none;
    color: #666;
}
nav a img{
    width: 40px;
    margin: 10px 0;/* margin对没有给出高度的盒子撑大盒子，因为若不给出高度，那么父级
    盒子的高度完全有这个盒子决定，那么marign也是盒子大小的一部分。
    */
}
nav a span {
    display: block;/* 让他换行 */
}

flex布局

flex操作方便，布局简单，在移动端基本没有兼容性的问题。但是在PC端兼容性比较差。
而且flex布局没有浮动的那些缺点。

初体验

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 80%;
            height: 300px;
            background-color: red;
            display: flex;/* 给父亲写 */
            justify-content: space-around;
        }
        div span {
            width: 150px;
            height: 100px;
            margin-right: 5px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

flex布局原理

flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。

总结flex布局原理:

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex容器（父级元素）常见属性

常见的属性

flex-direction :设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content :设置侧轴上的子元素的排列方式(多行)
align-items :设置侧轴上的子元素排列方式(单行)
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction 设置主轴的方向

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
在这里插入图片描述

元素是跟着主轴来排列的。

justify-content 设置主轴上的元素的排序方式

在这里插入图片描述
注意：

必须要确定主轴是哪一个。

flex-wrap 来设置元素是否换行

若不设置换行，那么子元素的总宽度超过了父级元素的宽度，那么将导致子元素宽度变小来。
默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。

align-items 设置侧轴上子元素的对齐方式（单行）

该属性是控制子项在侧轴（默认是y轴)上的排列方式在子项为单项（单行）的时候使用
在这里插入图片描述
注意：使用align-items: stretch时，flex元素不要给高度。

align-content 设置侧轴上子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行），在单行下是没有效果的。
在这里插入图片描述
start和end的子元素之间是没有缝隙的。

align-items和align-content的区别

在这里插入图片描述

flex-flow

flex-flow是flex-direction 和flex-wrap属性的复合属性。

flex元素（子元素）常见属性

flex元素占有的份数
align-self控制flex元素自己在侧轴的排列方式
order属性定义flex元素的排列顺序（前后顺序）

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

这就是圣杯布局，中间绿色那个盒子的flex:1;独占剩余部分。
flex-shrink的计算方法:
flex-shrink

 /* 
            flex-grow: 弹性增长系数，按比例分配即可,默认未0
            flex-shrink： 弹性缩减系数，默认为1 ，也就是说当页面发生变化时，会自动缩减
                计算方式比较复杂：是根据缩减系数和元素大小来计算的，不一定元素越大缩减越多，具体的查查资料吧
            flex-basis： 指定了 flex 元素在主轴方向上的初始大小
                如果主轴的横向的，那么指定的时元素的宽度，反之时高度，默认值为auto表示参考元素自身的高度或者宽度
                如果传递了具体数则以该值为准
            */

            /* 
            简写属性
                flex： 可以设置这三个弹性元素样式
                    顺序： gorw shrink basis
                    默认值：inital =》 0 1 auto
                    auto: 1 1 auto
                    none: 0 0 auto  相当于弹性元素没有了
            */

align-self自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

例如
只需要给3号盒子设置ailgn-self:flex-end; 即可。

order 定义元素的排列属性

数值越小，排列越靠前，默认为0。注意:和z-index不一样。

flex案例-携程网首页的制作

方案:我们采取单独制作移动页面
方案技术∶布局采取flex布局

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 这个一定要设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no,
    maximum-scale=1.0, minimum-scale=1.0">
    <link rel="icon" sizes="57x57" href="//pic.c-ctrip.com/h5/common/57.png?v=1.0"/>
    <title>携程模仿</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 技术：flex -->
    <!-- 搜索框 -->
    <div class="search-index">
        <div class="search"> 搜索：目的地...</div>
        <a href="javascript:;" class="user">我 的</a>
    </div>
    <!-- 焦点图 -->
    <div class="focus">
            <img src="./upload/focus.jpg" alt="">
    </div>
    <!-- 局部导航栏 -->
    <ul class="local-nav">
        <li>
            <a>
                <span class="local-nav-icon-1"></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a>
                <span class="local-nav-icon-2"></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a>
                <span class="local-nav-icon-3"></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a>
                <span class="local-nav-icon-4"></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a>
                <span class="local-nav-icon-5"></span>
                <span>景点</span>
            </a>
        </li>
    </ul>
    <!-- 主导航栏 -->
    <nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>
    <ul class="subnav-entry">
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>        
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>        
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>       
         <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
      
    </ul>
      <!-- 销售模块 -->
      <div class="sales-box">
       
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales bd">
            <div class="row">
                <a href="#"><img src="./upload/pic1.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic2.jpg" alt=""></a>
            </div>
            <div class="row">
                <a href="#"><img src="./upload/pic3.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic4.jpg" alt=""></a>
            </div>
            <div class="row">
                <a href="#"><img src="./upload/pic5.jpg" alt=""></a>
                <a href="#"><img src="./upload/pic6.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <script>
        let test = document.querySelectorAll('.subnav-entry-icon');
        let x = 0;
        for (let i = 0; i<test.length; i++){
            test[i].style.backgroundPosition = '0 '+ '-' + x + 'px';
            x+=31.9;
        }
       
    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    list-style: none;
    
}
/* 使用flex进行布局，所以的都可以设置w和h */
body {
    color: #000;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);/* 点击高亮 */
    -webkit-text-size-adjust: none;
    overflow-x: none;/* 这个意思就是不会出现水平的滚动条 */
    max-width: 540px;
    min-width: 320px;/* 一般都是这个 */
    margin: 0 auto;
   /*  background: #ccc; */
    font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;
   /*  height: 2000px; */
}
a {
    text-decoration: none;
    color: #222;
}
/* 搜索模块 */
.search-index {
    display: flex;
    position: fixed;/* 以浏览器为主，脱流的有三种：浮动、绝对和固定定位 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 不能使用margin：0 auto 居中了，因为有定位(是在设置了left的基础上才使得，要不然是可以的，也就是说在设置定位坐标钱，他还是会相对于他的父盒子的，记住记住)！！！！！ */
    width: 100%;/* 脱流，如果不设置，将没有内容 */
    height: 44px;
    /* background-color: red; */
    /* 因为固定定位是以浏览器的为主的，所以要对body设置的max-width和min-width没有用，要在设置一次 */
    max-width: 540px;
    min-width: 320px;
    background-color: #fff;
    
}
div {
    box-sizing: border-box;
}
.search {
    flex:1 1 auto;/* 只会占那么多的位置，所以加margin会影响他右边的元素，padding也是，只有里面的盒子话
    所以这里我们有理由认为，加了flex其实是在flex元素外面套了一个盒子，有这个盒子去进行growth和shrink
    */
    position: relative;
    height: 26px;
    line-height: 24px;/* 为什么不是26px呢？ 这是因为我们的盒子设置的是border-box, 那么就意味着内容的高度要减去上下边框*/
    font-size: 12px;
    color: #666;
    border: 1px solid #f6f6f6;
  /*   background-color: #bbb; */
    margin:7px  10px;
    padding-left: 25px;
    border-radius: 5px;
    box-shadow:rgba(0, 0, 0, 0.5) 0 0 3px;
}
.search::before {
    /* 总结：伪元素最好不要使用margin这些，他们影响后面的布局，解决方法，给伪元素加一个<i></i> 或者使用定位 */
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px;

}
.user {
    /* 在flex下，大小可以直接改 */
    width: 44px;
    height: 44px;
   /*  background-color: #bfa; */
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}
.user::before {
    content: '';
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 3px auto 0 auto;
}
.focus {
    margin-top: 44px;
}
.focus img{
    width: 100%;
    vertical-align: bottom;
}
.local-nav {
    display: flex;
    height: 64px;
    margin: 3px 4px ;
    background-color: #fff;
    font-size: 12px;
    border-radius: 8px;
    overflow: hidden;/* 防止圆角溢出 */
}
.local-nav li {
    flex: 1 1 auto;
}
.local-nav  li a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 练习属性选择器 */
.local-nav li [class^='local-nav-icon'] {
    width: 32px;
    height: 32px;
    background-color: #bfa;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat;
    background-size: 32px 160px;

}
.local-nav li .local-nav-icon-2{
    background-position-y: -32px;
}
.local-nav li .local-nav-icon-3{
    background-position-y: -64px;
}
.local-nav li .local-nav-icon-4{
    background-position-y: -96px;
}
.local-nav li .local-nav-icon-5{
    background-position-y: -128px;
}
nav {
    border-radius: 8px;
    margin:0 4px 3px;
    overflow: hidden;

}
.nav-common {
    display: flex;
    height: 88px;
    background-color: #434 ;
}
.nav-common:nth-child(2){
    margin: 3px 0;
}

.nav-items{
    display: flex;
    flex-direction: column;
   
    flex: 1 1 auto;
}
.nav-items:nth-child(2){
    border-left: 1px solid #fff ;
    border-right: 1px solid #fff ;
}
.nav-items a{
    text-align: center;
    line-height: 43.5px;
    color: #fff;
    flex: auto;
    text-shadow: 1px 1px rgba(0,0,0, 0.4);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a {
    /* 这里的bottom的使用，太久不用都太忘了 */
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
    border: 0;
}

/* 背景颜色的设置
背景家变属于是背景而不是背景颜色
*/
.nav-common:nth-child(1){
    background:-webkit-linear-gradient(left, #fa5a55, #fa994d);
}
.nav-common:nth-child(2){
    background:-webkit-linear-gradient(left, #4b90ed, #53bced);
}
.nav-common:nth-child(3){
    background:-webkit-linear-gradient(left, #34c2a9, #6cd599);
}

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    overflow: hidden;
    flex-wrap: wrap;

}
.subnav-entry li {
    /* 可以设置百分，重点，重点，这样才可以确定 一行盒子的个数，而且加了换行之后当傅盒子缩小后不会把这一行的元素挤下去*/
    flex: 1  1 20%;
}

.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
}

.subnav-entry a .subnav-entry-icon{
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}

.sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}
.sales-hd {
    position: relative;
    height: 44px;
    border-bottom:  1px solid #ccc;
}
/* 为了SEO */
.sales-hd h2 {
    text-indent: -999px;
    overflow: hidden;
}
.sales-hd h2::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 20px;
    display: block;
    width: 79px;
    height: 15px;
    background-color: pink;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 75px auto;
}
.sales-hd .more{
    position: absolute;
    right: 5px;
    top: 8px;
}
.row {
    display: flex;
}
.row a{
    flex: auto;
    border-bottom: 1px solid #ccc;
}
.row img {
    width: 100%;
}

rem适配布局

在这里插入图片描述

rem基础

rem单位

rem (root em)是一个相对单位，类似于em , em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
比如，根元素( html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px。

rem的优点：只需要改变html中的文字大小，页面中元素的大小可以得到整体控制。

媒体查询

媒体查询( Media Query )是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范：

@media mediatype and | not | only (media feature) {
	css-code ;
}

用@media开头注意@符号
mediatype 媒体类型
关键字and not only
media feature 媒体特性必须有小括号包含

mediatype
在这里插入图片描述
关键字

媒体特性

媒体查询案例之根据页面宽度改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 这里可以简化，不要max-width */
        @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

媒体查询加rem实现元素大小的动态变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

rem技术方案及其使用案例

方案一：

less + 媒体查询 + less

方案二：

res + flex.js
推荐这种方案，因为简单，而且无需了解里面的js代码

方案一

在这里插入图片描述

方案一之苏宁首页的制作

在这里插入图片描述
效果图：
请添加图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 这里一定要设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
    maximum-width=1.0, minimum-width=1.0">
    <title>苏宁移动web</title>
     <!-- 这个必须要引入，必须要不然会出很多的问题,而且必须放在第一个，要不然他会影响之前的css布局,一定要注意 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
   
</head>
<body>
    <!-- 技术选型为rem + less + 媒体查询 -->
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <!-- 采用flex布局，中间搜索框自适应 -->
        <a href="#" class="classify"></a>
        <div class="search">
           <form action=""><!-- 这里需要注意的是form自带margin，ul自带padding -->
               <input type="search" placeholder="hahah">
           </form>
        </div>
        <a href="#" class="login">登录 </a>
    </div>
    <!-- banner部分 -->
    <div class="banner">
        <img src="./upload/banner.gif" alt="" >
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <!-- 无语了，设置了ad类，被当作广告拦截了 -->
        <a href="#"><img src="./upload/ad1.gif" alt=""></a>
        <a href="#"><img src="./upload/ad2.gif" alt=""></a>
        <a href="#"><img src="./upload/ad3.gif" alt=""></a>
        
       <!--  <a href="#"><img src="./upload/ad2.gif" alt=""></a>
        
        <a href="#"><img src="./upload/ad3.gif" alt=""></a> -->
    </div>
</body>
</html>

common.less

在common.less中设置当屏幕宽度变化时的rem应该是多少。

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: ( 320px / @no );
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: ( 360px / @no );
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: (375px / @no);
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: (384px / @no);
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: (400px / @no);
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: (414px / @no);
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: (424px / @no);
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: (480px / @no);
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: (540px / @no);
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: (720px / @no);
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: (750px / @no);
    }
}

index.less

注意在开头使用@iomprt引入了less文件

/* 首页的less文件 */
@import "./common.less";

* {
    padding: 0;
    margin: 0;
}
a, body {
    color: #333;
}
html{
    background-color: #fff;/* 入伙html没有bgc，那么将变为和body一个bgc */
}
body {
    min-width: 320px;
    width:  15rem;/* 设计稿是以750px设计的，所以750/15是一个rem */
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica,STHeiTi,sans-serif;
/*     background: #f2f2f2; */
    background-color:red;
    height: 2000px;
   
    
}
 /* 页面元素rem计算公式： 页面元素的px / html 字体大小 记住  */
@baseFont: 50;
.search-content {
    display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width:  15rem;
  height: (88rem / @baseFont) ;/* 这里需要思考一下，为什么可以设置为死的50 */
  background-color: rgba(0, 0, 0, 0);
    .classify {
        width: (44rem / @baseFont);
         height: (70rem / @baseFont);
         margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
        background: url(../images/classify.png) no-repeat;
        background-size: 100%;/* 一定要写，因为盒子会缩放 */
    }
  .search {
      flex: 1 1 auto;
      overflow: hidden;
      form {
          margin-top: (8rem / @baseFont );
          font-size: (20rem / @baseFont);/* 放在这里改变input文字大小比较好 */
      }
      input {
          border: 0;
          width: 100%;
          height: (66rem / @baseFont);
          border-radius: (33rem / @baseFont);
            background-color: rgba(255, 255, 255, .5);;
          outline: none;/* 去掉input的外边框 */
          font-size: (25rem / @baseFont);
          color: #000;
          line-height: (66rem / @baseFont);
          padding-left: (55rem / @baseFont);
      }
  }
  .login {
      width: (75rem / @baseFont);/* 其实都可以加载插件完成的，不用这样手写，比例一旦确定不会再改变 */
      height: (70rem / @baseFont);
      margin: (10rem / @baseFont);
      font-size: (25rem / @baseFont);
      text-align: center;
      line-height: (75rem / @baseFont);
      color: #fff;
  }
}

.banner {
    width: 100%;
    height: (368rem / @baseFont);
    img {
        width: 100%;
    }
}
.ad {
    display: flex;
    a{
        flex: 1 1 auto;
        img {
            width: 100%;
        }
    }
}

方案二

flexible.js + rem

flexible.js地址: https://github.com/amfe/lib-flexible

flexible.js源码解析

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

我是真的垃圾啊

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端之移动web开发学习

移动端浏览器的现状移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。手机屏幕现状做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px物理像素比参考博客移动端的调试方法视口视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。布局视口（layout viewport）视觉视口（visual viewport）理想视口（ideal v
复制链接

扫一扫