移动webday04笔记

发表于
字数统计: 2.9k | 阅读时长 ≈ 10

《部分案例代码下载》

学习目标

  • 能够说出伸缩布局的主轴对齐方式和侧轴对齐方式
  • 能够说出如何让伸缩布局换行
  • 能够完成六面神骰
  • 了解响应式开发的原理

。。。。。。

理解上课的知识点……

flex布局（弹性布局）

通过给父元素添加flex属性，调整子元素在水平和垂直方向上的位置

传统布局和flex布局对比

布局方法的选取：

  • 如果是pc端页面布局，我们一般还是考虑传统布局方式

  • 如果是移动端或者不考虑兼容性问题的pc端页面布局，我们一般就可以考虑flex弹性布局

    如果不用考虑兼容性问题，flex布局会更加方便

flex布局的初体验

ヾ(๑╹◡╹)ﾉ” 让一个子盒子在父盒子中水平垂直居中

  • 之前使用子绝父相完成

  • 通过flex布局，三行代码完成

    1
    2
    3
    4
    5
    6
    /* 设置当前盒子为弹性盒子*/
    display: flex;
    /* 设置主轴方向的对齐方式：justify-content */
    justify-content: center;
    /* 设置侧轴方向的对齐方式：align-items */
    align-items: center;

设置了 display：flex; 的盒子会变成一个弹性盒子。弹性盒子会多出了主轴和侧轴的概念。

主轴： 默认水平向右 （类似于x轴）

侧轴：与主轴垂直的就是侧轴，默认垂直向下（类似于y轴）

弹性盒子内部的子元素会默认沿着主轴方向 排布，默认水平向右布局。（类似于羊肉串）

接下来学习一些flex布局中相关的属性

主轴方向（flex-direction）（了解）

弹性盒子中主轴方向默认是水平向右的。

但是其实可以通过flex-diretion 属性修改主轴的方向（一般很少改变）

取值（主轴方向）：

取值 效果（主轴方向）
row 水平向右（默认）
row-reverse 水平向左
column 垂直向下
column-reverse 垂直向上

主轴对齐方式（justify-content）（重点）

元素在主轴上排布，可以通过 justify-content 属性设置元素的对齐方式

取值：

  • flex-start：向主轴的开始位置对齐

    默认相当于左对齐

    flex-start

  • flex-end：向主轴的结束位置对齐

    默认相当于右对齐

    flex-end

  • center：居中对齐

    center

  • space-around：让空白环绕盒子显示

    space-around

  • space-between：让空白只在盒子之间显示

    space-between

单行侧轴对齐方式（align-items）（重点）

可以通过 align-items 设置单行元素在侧轴的对齐方式。

取值：

  • flex-start：向侧轴的开始位置对齐

    aflex-start

  • flex-end：向侧轴的结束位置对齐

    aflex-end

  • center：居中对齐

    acenter

  • stretch：让子盒子的高度拉伸显示（默认值）

    只有当子元素没有高度时，才会有拉伸效果（否则以设置的高度为准）

    astretch

是否换行（flex-wrap）

flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。

此时，如果需要设置子元素换行显示，可以使用属性 flex-wrap

取值：

属性值 效果
nowrap 不换行（默认值）
wrap 换行

多行侧轴对齐方式（align-content）

之前学习的 align-items 只是针对于单行元素的侧轴对齐方式。

如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行

取值（和align-items差不多）：

取值 效果
flex-start 向侧轴的开始位置对齐
flex-end 向侧轴的结束位置对齐
center 居中对齐
stretch 子元素高度拉伸显示（只有没设高才有效果）
space-around 空白环绕盒子显示
space-between 空白只在盒子之间显示

align-items与align-content的区别：

  • 如果子元素没有换行，只有一行的时候使用 align-items
  • 如果子元素有多行，此时使用 align-content
—————-

学习到这里，给父元素设置的相关样式已经说完了，稍微小结一下！

以下都是给子元素设置的相关属性~

分配子元素空间（flex属性）

可以通过flex属性设置子元素的分配的空间

需求： 让弹性盒子中的三个子元素等分！

作用： 按照份数分配父元素主轴（宽度）的剩余空间

优先分配具体的宽度，剩余的空间再按照分数分配。

代码： flex:份数;

通过flex属性可以很轻松的完成圣杯布局。

子元素排序（order属性）(了解)

在不能修改html结构的时候，要求改变子元素的属性，此时可以使用order属性设置

需求： 让弹性盒子中第二个子元素显示在左边第一个？？

作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0

代码： order：数字;

单个子元素侧轴对齐方式（align-self）

可以通过 align-self 属性设置单个子元素侧轴的对齐方式

需求： 让父元素中的单行子元素居中，然后让第一个子元素跑到侧轴开始位置！

作用： 设置单个子元素在侧轴的对齐方式

取值（和align-items取值一样）：

取值 效果
flex-start 向侧轴的开始位置对齐（默认相当于顶部对齐）
flex-end 向侧轴的结束位置对齐（默认相当于底部对齐）
center 居中对齐
stretch 子元素高度拉伸显示（只有没设高才有效果）

对于其他内容有兴趣可以看看阮一峰的博客

ヾ(๑╹◡╹)ﾉ” 六面神骰
———————–

携程网移动端首页项目

携程网移动端

技术选型

  • 方案：单独制作移动端页面
  • 技术：采用flex布局

项目搭建

和之前的操作一样

  • 新建一个项目文件夹

    • 新建images文件夹：放入常用的图片资源

    • 新建css文件夹：放入index.css

代码的编写

  • 视口需要设置完整：

    移动端开发第一个注意点

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

  • 在html中引入css文件

  • 移动端网页整体需要有一个整体的大容器

    • 可以直接把body当做整体大容器
    • 或者设置一个全局容器：container

  • 先把整个网页的各个模块划分好

    • 携程轮播：xc_banner
    • 携程导航：xc_nav
    • 携程产品：xc_product
    • 携程底部：xc_footer

  • 再每一个部分写

响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（pc、手机、平板）

什么是响应式布局

单独制作移动端页面方案（主流）：

同一个页面需要开发两套不同设备的版本

  • pc端需要开发写一套页面，专门给pc端看
  • 移动端再开发一套页面，专门给移动端看

响应式布局方案（较少）：

同一个页面只需要开发一套网页

  • 只需要写一套代码，同时给pc端和移动端看
ヾ(๑╹◡╹)ﾉ” 看看微金所项目~

响应式开发的原理（记忆）

动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏

响应式开发的优缺点

优点：

  • 一套网页可以适配多个终端。只需要开发一套网页即可

缺点：

  • 一个页面需要兼容多个终端，考虑的情况多种，开发效率较慢
  • 代码会更多，网页的加载速度较慢

响应式开发的现状

在国内并不是很流行，国外较多

  • 如果已经有了一套pc端网页，此时直接再写一套移动端网页即可，此时不需要使用响应式布局（比如：京东、淘宝）

  • 如果开发一套网页都没有，是新建的项目，此时可以考虑使用响应式，写一套即可兼容多个设备。

  • 比较简单的网页，可以考虑使用响应式，但是复杂的网页考虑的情况会很多，一般不用。

——————-

响应式开发的屏幕分类

在响应式开发中需要动态根据屏幕的宽度改变样式，但是不可能每变化1px就改变样式。

在响应式开发中，把各种屏幕宽度分为四大类，开发中只需要考虑这四种屏幕的情况即可

设备屏幕的分类

分类名称 宽度范围
超小屏设备 0 ~ 768px
小屏设备 768px ~ 992px
中屏设备 992px ~ 1200px
大屏设备 1200px ~ 正无穷

1

媒体查询

刚刚说了响应式原理是：动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏

所以需要根据不同屏幕的宽度改变样式。

可以通过css3中新增的媒体查询完成效果。

媒体查询（Media Query）：是CSS3新增的方法，媒体查询可以动态查询屏幕的宽度，根据不同的屏幕宽度设置样式是否生效！！

语法： 

1
2
3
@media screen and (条件) {
    选择器......
}

作用： 只有当屏幕宽度满足条件时，媒体查询中的选择器才能生效！！！

注意点： 媒体查询仅仅只是控制选择器是否生效，不会提升选择器的优先级！！

具体谁说了算，还是需要看优先级

条件：

  • min-width：样式生效的屏幕最小宽度

    只有当屏幕宽度大于等于该宽度时，样式才会生效

    1
    2
    3
    4
    5
    6
    7
    8
    /* 样式生效的最小宽为600px——》只有当屏幕宽度大于等于600px时，样式才会生效！！*/
    @media screen and (min-width:600px) {
        div {
            width: 400px;
            height: 400px;
            background-color: green;
        }
    }

  • max-width ：样式生效的屏幕最大宽度

    只有当屏幕宽度小于等于该宽度时，样式才会生效

    1
    2
    3
    4
    5
    6
    7
    8
    /* 样式生效的最大宽为800px——》只有当屏幕宽度小于等于800px时，样式才会生效*/
    @media screen and (max-width:800px) {
        div {
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    }

  • width ：样式生效的宽度

    只有当屏幕宽度正好等于该宽度时，样式才会生效

    1
    2
    3
    4
    5
    6
    7
    8
    /* 样式只在700px宽度的时候才会生效 */
    @media screen and (width:700px) {
        div {
            width: 400px;
            height: 400px;
            background-color: purple;
        }
    }
ヾ(๑╹◡╹)ﾉ” 如果需要在600~800之间样式生效，怎么写？？

一个媒体查询中可以同时写多个条件，中间通过and连接即可

1
2
3
4
5
6
7
8
/* 样式在 600~800中间生效 */
@media screen and (min-width:600px) and (max-width:800px) {
    div {
        width: 400px;
        height: 400px;
        background-color: orange;
    }
}

使用媒体查询完成响应式适配

可以通过媒体查询实现不同终端的布局和样式的切换，完成响应式布局。

需求：手动设置全局容器.container的响应式适配四种屏幕。

1
2
3
4
5
/* 需求： */
/* 超小屏幕: 0 - 768px      	版心：100% 	背景颜色：绿色 */
/* 小屏设备: 768px - 992px  	版心：750px 	背景颜色：蓝色 */
/* 中屏设备: 992px - 1200px 	版心：970px 	背景颜色：黄色 */
/* 大屏设备: 1200 ~  正无穷     版心：1170px   背景颜色：粉色 */

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦。真正开发中我们会借助一些响应式的框架，比如bootstrap。