移动端开发学习笔记

移动端开发

1、移动端开发基础

1.1 常见移动端屏幕尺寸
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rr33xZYF-1620388055039)(移动端开发.assets\image-20200716160107819.png)]
1.2 视口

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

1.2.1 布局视口

布局视口 layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面再手机上显示的问题
  • iOS,Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLXnAq2s-1620388055041)(移动端开发.assets\image-20200716160215881.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OqJ03OF-1620388055043)(移动端开发.assets\image-20200716160231738.png)]

1.2.2 视觉视口

视觉视口 visual viewport

  • 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域
  • 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKY0BGmr-1620388055046)(移动端开发.assets/image-20200716160324222.png)]

1.2.3 理想视口

理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口,对设备来讲,是最理想的视口尺寸
  • 需要手动添写meat视口标签通知浏览器操作
  • meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就有多宽
1.2.4 总结
  • 视口就是浏览器显示页面内容的屏幕区域
  • 视口分为布局视口、视觉视口和理想视口
  • 我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽
  • 想要理想视口,我们需要给我们的移动端页面添加meta视口标签
1.2.5 视口标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99PWlXJ7-1620388055047)(移动端开发.assets/image-20200716160447124.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzfrKt25-1620388055049)(移动端开发.assets/image-20200716160458785.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        
    <title>Documenttitle>
head>

<body>

body>

html>
1.2.6 标准的viewport设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4p4kiGO-1620388055050)(移动端开发.assets/image-20200716160522100.png)]

1.3 二倍图
1.3.1 物理像素&物理像素比
  • 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6、7、8是750*1334
  • 我们开发时候的1px不是一定等于1 个物理像素的
  • PC端页面,1个px等于 1 个物理像素的,但是移动端就不尽相同
  • 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
1.3.2 二倍图做法

如果直接放入图片 他会放大 2倍 会导致模糊

假设想要一个50X50像素的图片

1、准备一个100X100像素的图片

2、手动把这个图缩小为50X50像素的

这样就可以避免模糊

1.3.3 背景缩放 background-size

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

  • 单位:长度 | 百分比 | cover | contain;
  • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域 不会留白 可能有部分背景图片显示不全
  • contain把图像扩展至最大尺寸, 等比例缩放 可能会留白
background-size也是background的一个子属性,可以支持连写:
background:color image repeat attachment position / size
1.3.4 多倍图切图 cutterman

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MViQSSW-1620388055051)(移动端开发.assets/image-20200716160540153.png)]

1.4 移动端开发选择
1.4.1 移动端主流方案

1、单独制作移动端页面(主流)

比如:移动商城手机版、淘宝触屏版、苏宁易购手机版

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

三星手机官网

1.4.2 单独移动端页面(主流)

通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动端设备打开,则跳转到移动端页面

1.4.3 响应式兼容PC移动端

三星电子官网:www.samsung.com/cn/,通过判断屏幕宽度来改变样式,以适应不同终端

缺点:制作麻烦,需要花很大精力去调兼容性问题

1.5 移动端技术解决方案
1.5.1 移动端浏览器

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7qRUaG4-1620388055052)(移动端开发.assets/image-20200716160736190.png)]

1.5.2 CSS初始化 normalize.css

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

  • Normalize.css:保护了有价值的默认值
  • Normalize.css:修复了浏览器的bug
  • Normalize.css:是模块化的
  • Normalize.css:拥有详细的文档

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

1.5.3 CSS3 盒子模型 box-sizing

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PHSSsmn6-1620388055053)(移动端开发.assets/image-20200716160747524.png)]

  • 标准盒模型 box-sizing: content-box
    content-box:
    width = content width;
    height = content height

  • IE盒模型 box-sizing: border-box
    border-box:
    width = border + padding + content width
    heigth = border + padding + content heigth


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

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

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

html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM4VHFGq-1620388055053)(移动端开发.assets/image-20200716160803819.png)]

1.5.4 移动端 a链接 点击后会高亮显示 input的周围高亮 长按页面弹出菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvYgY0aP-1620388055054)(移动端开发.assets/image-20200716160814725.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0cVPpuof-1620388055055)(移动端开发.assets/image-20200716160827940.png)]

1.6 二倍精灵图
  1. 在ps里面把精灵图等比例缩放为原来的一半
  2. 之后根据大小测量坐标
  3. 注意代码里面bacgground-size也要写:精灵图原来宽度的一半
1.7 背景渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8msP8LtK-1620388055057)(移动端开发.assets/image-20200716160910624.png)]

2、移动端开发常见布局

2.1 移动端技术选型

移动端布局和以前我们学习的PC端有所区别:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LAHA8jb-1620388055057)(移动端开发.assets/image-20200716160924977.png)]

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

3.1 流式布局 基本概论
  • 流式布局,就是百分比布局,也称为固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式

核心思路的代码:


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            margin: 0 auto;
            max-width: 980px;
            min-width: 320px;
            width: 100%;
        }

        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>

html>
3.2 左侧固定死,右侧自适应 padding版本

如果一个盒子的宽度是继承的父级的,加padding 不会撑大盒子!!!


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            /* 如果一个盒子的宽度是继承的父级的,加padding 不会撑大盒子 */
            padding-left: 100px;

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>
3.3 左侧固定死,右侧自适应 overflow hidden版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6118016-1620388055058)(移动端开发.assets/image-20200716160937771.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            overflow: hidden;
          /* 添加了overflow:hidden 的元素不会和浮动的盒子有重叠的区域 */

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>
3.4 左侧固定死,右侧自适应,margin版本
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;

        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 120px;
            background-color: green;
            margin-left: 110px;
            /* 如果这个盒子的宽度是通过继承得到的,那么添加padding,border,margin都不会撑大盒子 */

        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">

        div>
    div>
body>

3.5 右侧固定死,左侧自适应,浮动版本

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;


        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>
3.6 圣杯布局 用定位的方法版本

圣杯布局

两侧浮动 中间标准流加高度,左右高宽写死 给中间加overflow

<body>
    
    <div class="search-wrap">
        <div class="search-btn">div>
        <div class="search">div>
        <div class="search-login">div>
    div>
body>
/* 搜索 */
.search-wrap {
    position: relative;
    height: 44px;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}

.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: purple;
}

.search {
    height: 44px;
    background-color: skyblue;
    margin-left: 50px;
    margin-right: 50px;
}
3.7 圣杯布局 用浮动版本

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 200px;
        }

        .left {
            float: left;
            background-color: blue;
            width: 100px;
        }

        .right {
            float: right;
            background-color: red;
            width: 100px;
        }

        .content {
            background-color: skyblue;
            overflow: hidden;
        }
    style>
head>

<body>
    <div class="box">
        <div class="left">我是左侧div>
        <div class="right">我是右侧div>
        <div class="content">我是内容div>
        
    div>
body>

html>

4、flex布局

4.1 初体验

加上 display:flex 以后,它里面的内容就不分块级元素,还是行内块元素,或者行内元素,都可以直接给大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MF5ml8F9-1620388055060)(移动端开发.assets/image-20200716160953068.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            widows: 80%;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    style>
head>

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

html>
4.2 布局原理

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

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

采用flex布局的元素,称为flex容易,简称:容器,它的所有子元素自动成为容器成员,称为flex项目,简称项目

4.3 flex布局父项常见属性
4.3.1 常见父项属性
  • flex-direction :设置主轴的方向
  • justify-content :设置主轴上的子元素排列方式
  • flex-wrap :设置子元素是否换行
  • align-contet :设置侧轴上的子元素的排列方式(多行)
  • align-items :设置侧轴上的子元素排列方式(单行)
  • flex-flow :复合属性,相当于同时设置了 flex-direction 和 flex-wrap
4.3.2 flex-direction 设置主轴的方向

1、主轴与侧轴

  • 默认主轴方向就是X轴方向,水平向右
  • 默认侧轴方向就是Y轴方向,水平向下

2、属性值

flex-direction属性决定主轴的方向(即项目的排列方向)

注意:主轴和侧轴是会变化的,就看flex-direction 设置谁为主轴,剩下的就是侧轴。我们的子元素是跟着主轴来排列的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ek2vQhAz-1620388055060)(移动端开发.assets/image-20200716161109215.png)]

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

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

注意:使用这个属性之前一定要确定好那个是主轴!!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjbYKKrL-1620388055061)(移动端开发.assets/image-20200716161122587.png)]

justify-content: flex-start 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NeDxpv1o-1620388055062)(移动端开发.assets/image-20200716161132868.png)]

代码:

    <style>
        div {
            display: flex;
            /* 设置成flex布局 */
            justify-content: flex-start;
          /* 默认值  */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    style>
head>

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

justify-content: flex-end 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWYvd5Gn-1620388055063)(移动端开发.assets/image-20200716161144747.png)]

代码:

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            justify-content: flex-end;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

justify-content: center 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JLxLAM6m-1620388055063)(移动端开发.assets/image-20200716161155377.png)]

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            justify-content: center;
            /* 让子子元素居中对齐 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
4.3.4 justify-content: space-around 平均分配剩余的空间,给每一个盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4biggxto-1620388055064)(移动端开发.assets/image-20200716161205791.png)]

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMhE89yX-1620388055065)(移动端开发.assets/image-20200716161216643.png)]

代码:

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            justify-content: space-around;
            /* 把剩余的空间平均分配给每一格盒子 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
4.3.5 justify-content: space-between 两边先贴边,然后,中间的除了两边的盒子,再平分剩余空间

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZguXBOZ-1620388055066)(移动端开发.assets/image-20200716161225891.png)]

代码:

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            /* justify-content: space-around;
            把剩余的空间平均分配给每一格盒子 */

            justify-content: space-between;
            /* 两边先贴边,然后其他的盒子,平局分布剩余空间*/
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
4.3.6 flex-wrap 设置子元素是否换行

如果父盒子设置了flex布局,子元素容不下的时候,它会缩小子元素的宽度,始终把他们显示在一行上

比如:父元素宽度600px 子元素一个宽度100px 里面有60 个子元素,子元素在页面显示的宽度就不是100px了

flex 布局中,默认子元素是不换行的,如果装不开,就会缩小子元素的宽度,把所有的子元素都显示在一行上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwpr6XzY-1620388055067)(移动端开发.assets/image-20200716161236418.png)]

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26TOSCV5-1620388055067)(移动端开发.assets/image-20200716161246527.png)]

代码:


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: pink;
            flex-wrap: wrap;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
    div>
body>

html>
4.3.7 align-items 设置侧轴上的子元素排列方式(单行)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgXVZ0h9-1620388055068)(移动端开发.assets/image-20200716161258341.png)]

stretch 使用这个代码,子元素必须是没有高度的 否则不起作用

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9hU2qCF-1620388055070)(移动端开发.assets/image-20200716161309114.png)]

代码:





    
    
    Document
    



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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CEJjaCJU-1620388055071)(移动端开发.assets/image-20200716161323070.png)]

1、align-content: flex-start 属性

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK7JHLZY-1620388055071)(移动端开发.assets/image-20200716161332412.png)]

代码:

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            align-items: stretch;
            /* 因为有了换行,items  不起作用了 */

            align-content: flex-start;
        }

        div span {
            width: 150px;
            height: 100px;
            margin: 5px;
            background-color: purple;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
    div>
body>

2、align-content: center

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rtz4fIOh-1620388055072)(移动端开发.assets/image-20200716161343660.png)]

3、align-between会让这两行盒子 一行顶着上边,一行顶着下面

4、align-around

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9OWrvLOZ-1620388055073)(移动端开发.assets/image-20200716161354814.png)]

4.3.9 align-content 和 align-items 区别
  • align-items 适用于单行情况下,只有上对齐、下对齐、居中、拉伸
  • align-content 适用于多行(换行)的情况下,(单行情况下无效),可以这是上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
  • 总结就是单行找 align-items 多行找align-content
4.3.10 flex-flow

flex-flex 属性时 flex-direction 和 flex-wrap 属性的复合属性

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yDQXWZP-1620388055074)(移动端开发.assets/image-20200716161406599.png)]

代码:

    



    
1 2 3 4 5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JdITGwXv-1620388055074)(移动端开发.assets/image-20200716161417356.png)]

4.4 flex布局子项常见属性
  • flex 子项目占的份数
  • align-self 控制子项自己在侧轴的排列方式
  • order属性 定义子项的排列顺序(前后顺序)
4.4.1 flex 属性

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

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWdcN8KN-1620388055075)(移动端开发.assets/image-20200716161426092.png)]

并且 红色和蓝色是固定死的,中间是自适应的 ,也就是圣杯布局

代码:

    <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;
            /* 把剩余空间 分配给 XXXX */
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    style>
head>

<body>
    <section>
        <div>div>
        <div>div>
        <div>div>
    section>
body>
4.4.2 align-self 控制子项在侧轴上的排列方式

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

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

要求:让三个盒子的某一个盒子垂直居中

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbqjjDHg-1620388055076)(移动端开发.assets/image-20200716161436050.png)]

代码:


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    style>
head>

<body>
    <section>
        <div>1div>
        <div>2div>
        <div>3div>
    section>
body>

html>
4.4.3 order 属性 定义项目的排列顺序

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

要求:三个盒子,每一个盒子的默认内容是 1 2 3 ,把2号盒子提到最前面

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGU9r5fY-1620388055077)(移动端开发.assets/image-20200716161508781.png)]

代码:

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            order: -1;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    style>
head>

<body>
    <section>
        <div>1div>
        <div>2div>
        <div>3div>
    section>
body>

5、rem布局

5.1 rem基础

rem是一个相对单位,类似于em ,em是父元素的字体大小。不同的是rem的基准是相对于html元素的字体大小。

rem 的优点 就是可以通过html里面的文字大小来改变页面中元素的大小可以整体控制

比如:根元素(html)设置的font-size=12px,非根元素设置width:2rem 则换成px表示就是24px

  1. em 是相对于父元素的字体大小来说的
  2. rem 是相当于 html 的字体大小来说的
    <style>
        div {
            font-size: 12px;
        }

        p {
            width: 10em;
            height: 10em;
        }
        /* 
            p最终  宽高是120px
            因为  p 的  1em   =  12px
        */
    style>
head>

<body>
    <div>
        <p>p>
    div>
body>
5.2 媒体查询

媒体查询就是CSS3新语法

媒体查询一般都是从小到大或者从大到小的顺序进行的

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NZB2n8S-1620388055079)(移动端开发.assets/image-20200716161527651.png)]

1、media type 查询类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdgUtx8Z-1620388055080)(移动端开发.assets/image-20200716161540424.png)]

2、关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzWZdx6j-1620388055080)(移动端开发.assets/image-20200716161552099.png)]

    <style>
        /* 这句话的意思就是:在我们屏幕上并且 最大的宽度是800像素,设置我们想要的样式 */
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }

        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
        /* 
        当屏幕的尺寸 在500--800px 之间   背景色是pink 
        如果在0--500px  之间 背景色是purple
        */
    style>
head>

<body>
body>
5.3 媒体查询+rem实现元素变化

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @media screen and (min-width:320px) {

            /* 表示 320  以上的 */
            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;
        }
    style>
head>

<body>
    <div class="top">购物车div>
body>

html>
5.4 rem适配方案技术使用(市场主流)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FjVMBMiV-1620388055081)(移动端开发.assets/image-20200716161604320.png)]

页面元素的rem 页面元素的px / html 字体大小 50

因为基准值是50,要按照设计稿来,做网页,然后根据页面的大小来不断地调整fontsize

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iF7aBgXX-1620388055082)(移动端开发.assets/image-20200716161615040.png)]

6、响应式布局

6.1 响应式开发原理

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHBdhVc7-1620388055083)(移动端开发.assets/image-20200716161625338.png)]

6.2 响应式布局容器

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

6.3 响应式导航栏

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    style>
head>

<body>
    <div class="container">
        <ul>
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
            <li>7li>
            <li>8li>
        ul>
    div>
body>

html>
6.4 bootstrap 简介
  • 中文官网:http://www.bootcss.com/
  • 官网:http://getbootstrap.com/
  • 推荐使用:http://bootstrap.css88.com/

优点:

  1. 标准化的html+css编码规范
  2. 提供了一套简洁、直观、强悍的组件
  3. 有自己的生态圈,不断地更新迭代
  4. 让开发更简单,提高了开发地效率
6.5 container类 和 container-fluid类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9CDynnA-1620388055084)(移动端开发.assets/image-20200716161640552.png)]

6.6 栅格系统 简介

栅格系统:它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

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

Bootstrap 里面 container 宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container化为12等份。

6.7 栅格系统参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwvAD273-1620388055084)(移动端开发.assets/image-20200716161651299.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psWiPZRL-1620388055085)(移动端开发.assets/image-20200716161659976.png)]

            

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row div {
            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">1div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4div>
            
        div>
    div>
body>

html>
6.8 列嵌套

列嵌套最好加一个行 这样可以消除父元素的padding的值并且高度自动和父亲一样高

6.8 列偏移

使用 .col-md-offset-*类可以讲列向右偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8XUZW3s-1620388055086)(移动端开发.assets/image-20200716161712935.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧div>
            <div class="col-md-4 col-md-offset-4">右侧div>
          
        div>
body>

html>
6.9 列排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcBE4rfd-1620388055088)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200705155754102.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzBpOjoA-1620388055089)(移动端开发.assets/image-20200716161723389.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    style>
head>

<body>
    <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>
body>

html>
6.10 列隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ja6J983n-1620388055089)(移动端开发.assets/image-20200716161739809.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }

        .row>div:nth-child(3) {
            background-color: red;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1div>
            <div class="col-xs-3">2div>
            <div class="col-xs-3 hidden-md">我会变魔术div>
            
            <div class="col-xs-3">4div>
        div>
    div>
body>

html>

你可能感兴趣的:(前端学习笔记)