移动端_Day1

2023-12-11 18:24:52

一、概述

1.1移动端的三大操作系统

1.Android

2.IOS

3.windows phone

其中安卓和IOS系统占的比重较大

1.2移动端的浏览器内核

手机是更高级的计算机，有些能力不必计算机差

五大主流浏览器：

iE 火狐谷歌苹果欧朋

浏览器内核：浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

四大浏览器内核

1.Trident内核代表IE浏览器

2.Gcko内核代表火狐浏览器

3.Webkit内核代表苹果浏览器和旧版谷歌浏览器

4.link内核代表谷歌浏览器和欧朋浏览器

移动端最常用的内核还是Webkit。

二、视口

2.1视口

分辨率：分辨率就是屏幕的像素数量，比如1920*1080，指的是横向有1920个像素点，纵向有1080个像素点。所谓像素点就是物理元件的最小发光点。

先在PC端看一下分辨率对浏览器显示的影响：

网页的版心都是固定的，都是1000px，如果电脑分辨率越大，会导致横向像素的呈递数量越多，网页占据的真实宽度就越小，字也会越小。

再来讨论移动端的分辨率

手机的分辨率一般比pc端的分辨率大，但是我们手机屏幕比电脑小很多，如果手机真的用自己的分辨率去呈递网页的话，就会非常密集，自会非常的小。

在很久之前，乔布斯提出了，可以用手机呈现网页，但是由于当时大多数的网页都是以980px为版心的形式，所以，可以将手机设置一个宽度为980px，这样就可以实现对网页的一个兼容显示，此时我们手机就刚刚好能够卡住版心区域。

*****************************************

对前面知识的复习：

用getElementById("Id")获取到的是一个单标签而用getElementsByTagName或者getElementsByClassName获取到的都是数组。

querySelectorAll获取到的是一个数组，而querySelector（）获取到的是单个标签。

而且在用getElementsByTagName("div")[n]；这种写法是正确的，相当于只获取了第n+1个div标签，下面写样式的时候就不用写成数组元素形式，直接写数组名。

而且在getElementById("Id")中括号中的Id不需要加#，而在querySelector("#Id")中括号中的Id需要加#。

用下面的语句显示手机的宽度，发现是980。所有的手机浏览器显示的都是980。

<script>
   var nH1 = document.getElementsByTagName("h1")[0];
   nH1.innerHTML = document.documentElement.clientWidth;
</script>

但是实际上手机的像素并不是980，而比980大。

无论我们测试什么手机设备都会得到这个结果，980是所有设备的viewport（初始视口宽度），浏览器会以980来显示页面。

因为分辨率越大手机上显示的字就越小，实际上980px相对于手机页面还是很大，因此乔布斯又提出了一个想法，让开发者自定义移动设备的视口宽度。

  <!-- 配置移动端的视口 -->
    <meta name="viewport" content="width=300px">

通过上述一行代码可以让开发者自定义视口宽度，当我们设置了浏览器的宽度是300px时，浏览器就会认为自己的宽度就是300px，此时就会按照300px在显示页面。

我们发现，不同的视口大小，呈递相同的页面，给人的感觉是不一样的。尤其是看文字，h1默认的文字是32px，如果你设置的视口宽度是980px，此时会发现字特别的小，如果是320左右，此时感觉视觉效果能接受

2.2视网膜屏幕概念

当前我们浏览器现实的像素比并不是真正的手机像素比，所以在开发的时候并不用关心某一个型号手机的分辨率。

乔布斯提出了“设备像素比”的概念，我们可以通过dpr（device pixel radio）来获取或者设置当前的设备像素比。

获取设备像素比：

nH2.innerHTML = window.DevidePixelRadio;

我们知道了设备像素比，然后也知道了视口是可以自定义的，但是我们工作中都是用设备的宽度进行设置

我们可以设置下面的代码，为设备的宽度，此时会计算出当前设备的视口宽度

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

content的属性值介绍：

width=device-width 约束视口的宽度
initial-scale=1.0 初始视口的宽度是1倍
minmum-scale=1.0 用于设置最小缩放比例取值取值1.0-10.0
maximum-scale=1.0 用于设置最大缩放比例取值1.0-10.0
user-scalable=no 是否允许用户缩放，默认是yes

常见的浏览器调试手机型号的视口宽度

iphone8plus： 414px
iphone6： 372px
三星Galaxy S5： 360px

如果将视口宽度和显示区域的宽度设置一致，那么页面就会全部显示。

三、百分比布局

此时设备都有了一个自己的宽度，大概是320-450之间，设备和设备是不一样的。

我们希望页面是没有版心，这是应为：

手机已经很小了，如果再有版心，会很难看。比如iphone宽度是414，如果版心360，此时页面左右会各占27px的白边
手机app都是撑满屏幕，用户总是希望看到网页的时候，也是撑满屏幕的效果

我们会发现每一个手机的约束视口的宽度是不一样的，比如我们的iphone8plus是414，而iphone8是375，此时我们的版心该如何设置？答案是不能设置固定像素，可以设置弹性盒子

3.1、百分比布局

百分比布局又叫流式布局，单位是%。

如果width和height属性设置百分比，则参考的是父盒子的width或者height（client区的宽）；如果没有父元素，则参考的就是body标签。

如果padding属性设置百分比，参考的是祖先元素的宽度的百分比。（无论哪个方向的padding参考的都是父盒子的宽度）。

如果margin属性设置百分比，参考的也是祖先元素的宽度的百分比。（无论哪个方向的margin参考的也是父盒子的宽度）。

border属性不支持百分比布局。

绝对定位元素如果设置百分比，此时width、height、padding设置百分比参考的是距离自己最近的有相对定位的父元素。定位会脱标，浮动也可以。

3.2box-sizing属性

作用是设置如何计算盒子的实际占有宽高。

实际占有宽高=width + padding + border

上面我们对盒模型的认知是盒子是外扩的，也就是如果我们在width和height 有值的基础上设置padding或者border，盒子会变大

box-sizing有三个属性值，一个是border-box，代表的是盒模型内缩，现在的width = 盒子本身的width - 左右padding - 左右border；第二个属性值是content-box（默认值），这个与外扩式盒子的宽高相同；第三个属性值是inherit，代表继承父盒子的box-sizing的值。

padding:10px 20px 30px 40px; 分别是上右下左顺时针方向。

Android4之前的需要加-webkit-

IOS4.3之前需要加-webkit-

3.3calc()属性

固比固描述：上图中左边是固定的200px，右边是固定的200px,中间是根据整个页面剩余宽度进行的适配，所以中间是不能设置固定宽度，整个就是比例宽度，所以，这种设计叫做固比固。

如何实现固比固？

第一种方法，通过box-sizing和绝对定位实现的

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
        }
        .left{
            width: 200px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .center{
            width: 100%;
            padding: 0 200px;
            background: black;
            box-sizing: border-box;
        }
        .right{
            width: 200px;
            background: blue;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>

相当于box-sizing内缩把左右padding让出了200px，然后通过绝对定位即可实现固比固。

第二种方法，利用计算属性calc()属性。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            float: left;
        }
        .left{
            width: 200px;
            background: red;
        }
        .center{
            width: calc(100% - 400px);
            background: black;
        }
        .right{
            width: 200px;
            background: blue;
        }
    </style>
</head>

calc()有计算功能

比如width:calc(200px - 100px);需要注意的是，两个数字之间需要用空格隔开，否则不会识别。

3.4、min-和max-属性

我们可以通过min-width或者min-height实现最小的宽度和最大高度的设置，也可以通过max-width或者max-height实现最大的宽度和最大高度的设置

div {

min-width: 500px;

max-width: 800px;

min-height: 200px;

max-height: 300px;

background: orange;

}

上面的div盒子的最大宽度是800px，最小宽度是500px，在500-800px之间是有弹性空间

最大高度是300px，最小高度是200px，在200-300px之间是有弹性空间

在不知道元素具体区域宽高的时候，使用这些属性能很好让网站实现自适应效果。如果min>max，则按min来设置宽高

四、flex布局

参考博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

比如我们给一个盒子设置display:flex属性，此时这个盒子的内部拥有了flex布局能力

**************************************************************************************************

选择器的权重一定要给够，不能怕麻烦。

内联样式，如: style="..."，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
类型选择器、伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等。如* > +，权值为0000。
继承的样式没有权值

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
       display:-webkit-;//Safari
       display:flex;
}

1.父盒子设置display:flex;

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 100px;
            display: flex;
            background: red;
        }
        .box .item1{
            width: 100px;
            background: cyan;
        }
        .box .item2{
            width: 100px;
            background: yellow;
        }
        .box  .item3{
            width: 100px;
            background: green;
        }
    </style>

如上述代码所示，在给父盒子设置了display:flex;后，三个子盒子自动在一行，不用再给每个兄弟盒子设置浮动。

2.父盒子设置display:inline-flex;

如果父盒子设置了inline-flex，此时父盒子的宽度不是撑满父盒子的宽度，而是被子元素撑满。如果每个子盒子的宽度太大超过了屏幕显示范围则会显示出进度条而不是像flex状态下直接设置最大宽度。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 100px;
            display: inline-flex;
            background: red;
        }
        .box .item1{
            width: 100px;
            background: cyan;
        }
        .box .item2{
            width: 100px;
            background: yellow;
        }
        .box  .item3{
            width: 100px;
            background: green;
        }
    </style>

flex布局其实就是分为容器和项目，容器就是指的是当前的父盒子的状态，项目就是内部的子元素的状态

<div class="box"> →display:flex
    <div class="item1 item"></div>→width:100px
    <div class="item2 item"></div>→width:100px
    <div class="item3 item"></div>→width:100px
</div>

.box是容器，.item是项目

4.1容器的属性

******************************************************************************

用line-height设置文字在盒子中垂直居中，让line-height的值等于外层盒子的高度即可

1、flex-direction属性

一共有四个属性值

row:水平排列起点在左端
column: 垂直排列起点在顶端（在flex及inline-flex状态下可以不用满足高度之和）
row-reverse: 水平排列起点在右端
column-reverse: 垂直排列起点在低端（这种情况下父盒子的高度一定要满足子盒子高度之和）

2.flex-wrap属性

flex布局如果默认的情况是水平一条线的，如果需要换行，要设置flex-warp属性

在flex布局下，如果一行的宽度之和大于这一行的宽度，不会换行显示，会按当前最大显示宽度平均分给这几个盒子作为宽度。

如果需要换行并且让这几个盒子按照我们设置的宽度来加载，则需要设置flex-wrap属性。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 100px;
            display:flex;
            flex-direction: row;
            background: red;
            font-size: 30px;
            color:#FFF;
            text-align: center;
            line-height: 100px;
            flex-wrap:wrap;
        }
        .item{
            width: 300px;
        }
        .box .item1{
            background: cyan;
        }
        .box .item2{
            background: yellow;
        }
        .box  .item3{
            background: green;
        }
        .box .item4{
            background: blue;
        }
        .box .item5{
            background: black;
        }
        .box  .item6{
            background: orange;
        }
    </style>