admin管理员组

文章数量:1655503

一、目标

  • 能够知道移动WEB的开发现状

  • 能够写出标准的viewport

  • 能够使用移动web的调试方法

  • 能够说出移动端常见的布局方案

  • 能够描述流式布局

  • 能够独立完成京东移动端首页

目录：

  • 移动端基础

  • 视口

  • 二倍图

  • 移动端调试

  • 移动端技术解决方案

  • 移动端常见布局

  • 移动端开发之流式布局

  • 京东移动端首页制作

二、移动端基础

1浏览器现状

国内的 UC 和 QQ，百度等手机浏览器都是根据 Webkit 修改过来的内核，国内尚无自主研发的内核，就像国外的手机操作系统都是基于Android修改开发一样

总结：兼容移动端主流浏览器，处理 Webkit 内核浏览器即可。

1.2手机屏幕现状

  • 移动端设备屏幕尺寸非常多，碎片化严重。

  • Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

  • 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

  • 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

1.3常见尺寸

1.4移动端调试方法

2视口viewport

  • 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

  • 我们只需要关注理想视口

2.1布局视口layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

  • iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2.2、视觉视口 visual viewport

  • 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

2.3、理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定

  • 理想视口，对设备来讲，是最理想的视口尺寸

  • 需要手动添写meta视口标签通知浏览器操作

  • meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽(乔布斯提出的哟)

2.4、总结

  • 视口就是浏览器显示页面内容的屏幕区域

  • 视口分为布局视口、视觉视口和理想视口

  • 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽

  • 想要理想视口，我们需要给我们的移动端页面添加 meta视口标签

3、meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性

解释说明

width

宽度设置的是viewport宽度，可以设置device-width特殊值(宽度是设备宽度)

initial-scale

初始缩放比，大于0的数字

maximum-scale

最大缩放比，大于0的数字

minimum-scale

最小缩放比，大于0的数字

user-scalable

用户是否可以缩放，yes或no（1或0）

标准的viewport设置

  • 视口宽度和设备保持一致

  • 视口的默认缩放比例1.0

  • 不允许用户自行缩放

  • 最大允许的缩放比例1.0

  • 最小允许的缩放比例1.0

4、二倍图

1.物理像素和物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334

  • 我们开发时候的1px 不是一定等于1个物理像素的

  • PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同

  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

  • PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。由于 Retina 的出现，对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

原文链接：https://blog.csdn/Augenstern_QXL/article/details/120374974

例如：我们需要一个 50*50 像素(css像素)的图片，直接放到我们的手机里面会放大2倍变成 100 * 100，这样就会模糊。

解决办法：我们直接放一个 100 * 100 图片，然后手动的把这个图片缩小为 50 * 50。这样将图放到手机里面，手机自动放大2倍变成 100 * 100，这样就不会造成图片模糊

我们准备的图片，比我们实际需要的大小大2倍，这种方式就是二倍图

4.背景缩放 background-size

我们的图片需要进行放大处理，那么我们的背景图片也是需要进行缩放处理。

background-size: 背景图片宽度 背景图片高度;

  • 单位： 长度|百分比|cover|contain

  • cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

  • contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

多倍图切图cutterman

5移动端开发选择

1.单独制作移动端页面(主流)，通常情况下，网址域名前面加 m(mobile) 可以打开移动端。

  • m.taobao

  • m.jd

  • m.suning

  • 通过判断设备，如果是移动设备打开，则跳到移动端页面。

2.响应式页面兼容移动端(其次)

3.移动端浏览器

  • 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

  • 我们可以放心使用 H5 标签和 CSS3 样式。

  • 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

6.CSS初始化 normalize.css

移动端 CSS 初始化推荐使用 normalize.css

官网地址：http://necolas.github.io/normalize.css/

将内边距设为0，去除间隔等。。。

特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { 
    -webkit-touch-callout: none;
}

7、CSS3盒子模型 box-sizing

  • 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

  • CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width，里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

  • 移动端可以全部CSS3 盒子模型

  • PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

三、移动端常见布局

响应式页面：随着页面大小发生该面，里面显示的内容也发生改变，缩小也就是内容减少

1、流式布局(百分比布局)

  • 流式布局，就是百分比布局，也称非固定像素布局。

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>

2、flex布局

传统布局

flex弹性布局

兼容性好

操作方便，布局极为简单，移动端应用很广泛

布局繁琐

PC 端浏览器支持情况较差

局限性，不能再移动端很好的布局

IE 11或更低版本，不支持或仅部分支持

建议：

  1. 如果是PC端页面布局，我们还是传统布局。

  1. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

2.1、flex布局体验

  1. 搭建HTML结构

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

2.CSS样式

  1. span 直接给宽度和高度，背景颜色，还有蓝色边框

给 div 只需要添加 display: 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 {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: center;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: aliceblue;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

2.2、flex布局原理

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

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

  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

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

  • 上述例子 div 就是 flex父容器。

  • 上述例子 span 就是 子容器 flex项目

  • 子容器可以横向排列也可以纵向排列

总结 flex 布局原理：就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

2.3flex布局常见父项属性

以下有 6 个属性是对父元素设置的

  • flex-direction：设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

  • flex-wrap：设置子元素是否换行

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

  • align-items：设置侧轴上的子元素排列方式（单行）

  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

①flex-direction：设置主轴的方向

主轴和侧轴：在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是 x 轴方向，水平向右

  • 默认侧轴方向就是 y 轴方向，水平向下

  • flex-direction 属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是可以变换的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值

说明

row

默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

②justify-content ：设置主轴上的子元素排列方式

  • justify-content 属性定义了项目在主轴上的对齐方式

  • 注意： 使用这个属性之前一定要确定好主轴是哪个

属性值

说明

flex-start

默认值从头部开始，如果主轴是x轴，则从左到右

flex-end

从尾部开始排列

center

在主轴居中对齐(如果主轴是 x 轴则水平居中)

space-around

平分剩余空间

space-between

先两边贴边，再平分剩余空间（重点）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            
            /* justify-content: flex-start; */
            
            /* justify-content: flex-end; */
            
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
③flex-wrap ：设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

意思就是如果按照我们设置的盒子大小，一行只能装 3 个盒子，但是我们有 5 个盒子，那么 flex 布局默认会给我们塞上去，自动缩小盒子大小。flex布局默认不换行

属性值

说明

nowrap

默认值，不换行

wrap

换行

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
④align-items ：设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

属性值

说明

flex-start

从上到下

flex-end

从下到上

center

挤在一起居中(垂直居中)

stretch

拉伸(默认值)

⑤align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值

说明

flex-start

默认值在侧轴的头部开始排列

flex-end

在侧轴的尾部开始排列

center

在侧轴中间显示

space-around

子项在侧轴平分剩余空间

space-between

子项在侧轴先分布在两头，再平分剩余空间

stretch

设置子项元素高度平分父元素高度

⑥align-content 和 align-items 区别

1.align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸

2.align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。

3.总结就是单行找 align-items 多行找 align-content

⑦flex-flow

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

flex-flow: row wrap;

  • flex-direction：设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

  • flex-wrap：设置子元素是否换行

  • flex-direction：设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

  • flex-wrap：设置子元素是否换行

2.4flex布局常见子项属性

  • flex 子项目占的份数

  • align-self 控制子项自己在侧轴的排列方式

  • order属性定义子项的排列顺序（前后顺序）

①flex属性

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

子盒子：
.item {
    flex: <number>;    /* default 0*/
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
②align-self 控制子项自己在侧轴上的排列方式

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

  • 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
③order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

给子元素设置：order:-1; /* 默认是0 -1比0小所以在前面 */

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面  */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

3、rem适配布局

我们来看几个问题：

  1. 页面布局文字能否随着屏幕大小变化而变化？

  1. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？

  1. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

①rem基础

  • rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

  • 不同的是rem的基准是相对于html元素的字体大小。

  • 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px

  • rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 12px;
        }
        
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        
        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            /* width: 10em;
            height: 10em; */
            /* 2. rem 相对于 html元素 字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>

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

</body>

②媒体查询

媒体查询（Media Query）是CSS3新语法。

  • 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

  • @media 可以针对不同的屏幕尺寸设置不同的样式

  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法如下：

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

  • 用 @media 开头 注意@符号

  • mediatype 媒体类型

  • 关键字 and not only

  • media feature 媒体特性 必须有小括号包含

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
        /* max-width 小于等于800 */
        /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>
</head>

上面代码的意思是在我们屏幕上页面处于 500px-800px 之间，页面背景颜色显示为 pink 色。页面小于 500px，背景颜色显示为 purple 色

@media mediatype and|not|only(media feature)

1、mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值

解释说明

all

用于所有设备

print

用于打印机和打印预览

scree

用于电脑屏幕、平板电脑、智能手机等

2、关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。

  • not：排除某个媒体类型，相当于“非”的意思，可以省略。

  • only：指定某个特定的媒体类型，可以省略。

3.媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含。

值

解释

width

定义输出设备中页面可见区域的宽度

min-width

定义输出设备中页面最小可见区域宽度

max-width

定义输出设备中页面最大可见区域宽度

注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁（px单位不能省略）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>
</head>

思路：

  • 按照从大到小的或者从小到大的思路

  • 注意我们有最大值max-width和min-width都是包含等于的

  • 当屏幕小于540像素时，背景颜色为蓝色（x<=539）

  • 当屏幕像素大于等于540，并且小于等于969像素的时候背景颜色为绿色（540<=x<=969）

  • 当屏幕大于等于970像素的时候，背景颜色为红色（x>=970）

案例：媒体查询+rem实现元素动态大小变化

  • rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

  • 媒体查询可以根据不同设备宽度来修改样式

  • 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>

上述代码的意思是：屏幕尺寸小于320px， div 大小为 0.5*50 = 25px，屏幕尺寸大于 320px 小于 640px， div 大小为 0.5 * 100 = 50px

4.、引入资源

  • 当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。

  • 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例：

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

③Less

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

  • CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。

  • 不方便维护及扩展，不利于复用。

  • CSS 没有很好的计算能力

  • 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。

  • 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。

  • 它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。

  • Less中文网址： http://lesscss/

  • Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。

1.Less安装

安装：(如果使用vscode无需安装less)

npm install -g less

查看版本：

lessc -v

我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。

2、Less变量
@变量名: 值;
往下跟CSS样式一样

变量命名规范

  • 必须有@为前缀

  • 不能包含特殊字符 ×@color@~

  • 不能以数字开头 ×@123color

  • 区分大小写

@color: pink;
@font14:14px;

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

//直接使用
body{
    color: @color;
}
a:hover{
    color: @color;
    font-size:@font14;
}
div{
    color:@color;
    font-size:@font14;
}
3、Less编译

我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

我们可以在 vscode 安装 Easy LESS 插件来把 less 文件编译为 css。安装完毕插件，重新加载下 vscode。只要保存一下Less文件，会自动生成CSS文件。

4、Less嵌套

我们经常用到选择器的嵌套

子元素的样式直接写到父元素里面就好

#header .logo {
    width: 300px;
}

#header {
    .logo{
        width: 300px;
    }
}

如果遇见 （交集|伪类|伪元素选择器）

  • 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代

  • 如果有 & 符号，它就被解析为父元素自身或父元素的伪类

如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加&

a:hover{
    color: red;
}
a{
    &:hover{
        color: red;
    }
}
5、Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

@width: 10px + 5;
div {
    border: @width solid red;
}

/* 生成的css */
div {
    border: 15px solid red;
}

/* Less甚至还可以这样 */
width: (@width + 5) * 2;

注意：

  • 乘号（*）和除号（/）的写法

  • 运算符中间左右有个空格隔开 1px + 5

  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

6、rem适配方案

  1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

  1. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

实际开发中适配方案：

  1. 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）

  1. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

rem 适配方案技术使用

①rem实际开发适配方案一

rem + 媒体查询 + less 技术

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以750为准。

动态设置 html 标签 font-size 大小的步骤：

  1. 假设设计稿是750px

  1. 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

  1. 每一份作为html字体大小，这里就是50px

  1. 那么在320px设备的时候，字体大小为320/15 就是 21.33px

  1. 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的

  1. 比如我们以 750为标准设计稿

  1. 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1

  1. 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1

  1. 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

元素大小取值方法：

  1. 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

  1. 屏幕宽度/划分的份数 就是 html font-size 的大小

  1. 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

②rem实际开发适配方案二

  • flexible.js

  • rem

1.简介高效的rem适配方案flexible.js

下载地址：https://github/amfe/lib-flexible

2、技术选型

方案：我们采取单独制作移动页面方案

技术：布局采用rem适配布局2（flexible.js+rem）

设计图：本设计图采用750px设计尺寸

3.设置视口标签以及引入初始化样式还有js文件

 <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/flexible.js"></script>

4.VSCode px转换rem插件cssrem

这是一个神奇的插件

4.移动WEB开发之响应式布局

  • 能够说出响应式原理

  • 能够使用媒体查询完成响应式导航

  • 能够使用Bootstrap的栅格系统

  • 能够使用bootstrap的响应式工具

  • 能够独立完成阿里百秀首页案例

  1. 响应式开发

1.1响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面的子元素的排列方式和大小，从而实现不用屏幕下，看到不同的页面布局和样式变化。

1.2Bootstrap前端开发框架

快速开发功能

Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷

  • 中文官网：http://www.bootcss/

  • 官网：http://getbootstrap/

  • 推荐使用：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss)

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预判样式库、组件和插件。使用者要按照框架所规定的的某种规范进行开发。

优点：

  • 标准化的html+css编码规范

  • 提供了一套简洁、直观、强悍的组件

  • 有自己的生态圈，不断地更新迭代

  • 让开发更简单，提高了开发的效率

1.3Bootstrap使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。

控制权在框架本身，使用者要按照框架所规定的的某种规范进行开发

Bootstrap使用四个步骤：

  1. 创建文件夹结构

  1. 创建html骨架结构

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap引入 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
 <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSs不起作用的问题 -->
      <script src="https://cdn.jsdelivr/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
 <!-- 解决ie9以下浏览器对css3MediaQuery的不识别 -->
      <script src="https://cdn.jsdelivr/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>

  1. 引入相关样式文件

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  1. 书写内容

bootstrap通过这个类规定了外观形状：设置相应的类名，就会出现对应的形状

  • 直接拿Bootstrap预先定义好的样式来使用

  • 修改Bootstrap原来的样式，注意权重问题：利用我们自己写的样式覆盖原先的样式

  • 学号Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

2、布局容器.container

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container他提供了两个做此用出的类。

2.1.container类

  • 响应式布局的容器 固定宽度

  • 大屏（>=1200px）宽度定位1170px

  • 中屏（>=992px）宽度定义为970px

  • 小屏（>=768px）宽度定义为750px

  • 超小屏（100%）

2.2container-fluid类

  • 流式布局容器 百分百宽度

  • 占据全部视口（viewport）的容器

  • 适合于单独做移动端开发

3、栅格系统

它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分成12等份。

3.1、栅格选项参数

无需在引入初始化Normalize.css，因为Bostrap已经给你引入了

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

超小屏幕（手机）

<768px

小屏设备（平板）

>=768px

中等屏幕（桌面显示器）

>=992px

宽屏设备（大桌面显示器）

>=1200px

.container最大宽度

自动（100%）

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列（column）数

12

  • 行（row）必须放到container布局容器里面

  • 我们实现列的平均划分，需要给列添加类前缀

  • xs-extra small：超小；sm-small:小；md-medium:中等；lg-large:大；

  • 列（colum）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

  • 每一列默认有左右15像素的padding

  • 可以同时为一列指定多个设备的类名，以便划分不同分数 列如class=“col-md-4 col-sm-6”

<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSs不起作用的问题 -->
    <script src="https://cdn.jsdelivr/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <!-- 解决ie9以下浏览器对css3MediaQuery的不识别 -->
    <script src="https://cdn.jsdelivr/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        [class^="col"] {
            border: 1px solid red;
        }
        
        .container .row:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12，则孩子能占满整个的container的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12 则会？则占不满整个container的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会？多余的那一行会  另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>

</html>
3.2、列嵌套

格栅系统内置的格栅系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素岛已经存在的.col-sm-*元素内。

原理：在父盒子内又划分成12等份，让俩子元素分别占6等份，就可以将父盒子分开

<!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">
    <title>Document</title>
    <!--[if lt IE 9]>
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSs不起作用的问题 -->
    <script src="https://cdn.jsdelivr/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <!-- 解决ie9以下浏览器对css3MediaQuery的不识别 -->
    <script src="https://cdn.jsdelivr/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

</html>
3.3、列偏移

使用.col-md-offset-*类可以将列向右偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边框（margin）

<div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
    </div>
3.4、列排序

通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序

原理：将右边的盒子拉倒左侧来，将左侧的盒子推到右侧去

 <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
3.5响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名

超小屏

小屏

中屏

大屏

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

与之相反的，是visble-xs visible-sm visible-md visible-lg是显示某个页面内容：正常会隐藏，只有在对应的屏幕下会显示

4、VW和VH移动端布局

4.1移动端布局

  • 移动端布局--flex布局

  • 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放

  • 需要移动端适配有如下方案：

rem：

市场是比较常见

  1. 需要不断修改html文字大小

  1. 需要媒体查询media

  1. 需要flexible.js

vw、vh：

将来（马上）趋势

  1. 省去各种判断和修改

代表：b站

4.2vw/vh是什么

  • VW/VW是一个相对单位（类似em和rem相对单位）

  • vw是：viewport width 视口宽度单位

  • vh是：viewport height 视口高度单位

  • 相对视口的尺寸计算结果

  • 1vw=1/100视口宽度

  • 1vh=1/100视口高度

例如：

当前屏幕视口是375像素，则1vw就是3.75像素，如果当前屏幕视口为414，则1vw就是4.14像素

注意：

和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。

vw/vh是什么？

  • 是相对单位总是相对于视口来说的

  • 1vw就是当前视口的1/100

vw和百分比的区别是什么？

  • 百分比%相对于父元素来说的

  • vw/vh相对于当前视口来说的

4.3、vw和vh怎么用

  • 超级简单，元素单位直接使用新单位vw/vh即可

  • 因为vw/vh是相对单位，所以在不同视口（屏幕）下，宽高一起变化完成适配。

小结：

  1. 开发中使用vw，需要像素大厨有哪些改动？

  • 把模式改成2x模式

  1. 开发中使用vw，如何还原设计稿？

  • 确定设计稿视口宽度。比如375

  • 直接使用测量数值/(视口宽度/100)

  • 比如：50/（375/100）

5、vw注意事项

  • 因为设计到大量除法，还是适应LESS搭配更好点。

  • 我们本质是根据视口宽度来等比例缩放页面高度和宽度的，所以开发中使用vw就基本够用了。vh很少用

  • 兼容性查看：网站：http://caniuse/

四、总结

移动端布局总结

1.移动端主流方案

2.移动端技术选型

  • 流式布局（百分比布局）

  • flex弹性布局（推荐）

  • rem适配布局（推荐）

  • 响应式布局

建议：我们选取一种主要技术选型，其他技术作为辅助，这种混合技术开发

本文标签： web

版权声明：本文标题：移动端WEB开发 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729705632a1210700.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。