前端基础进阶3

前端基础进阶

移动端特点

  • 头脑风暴

    • PC端网页和移动端网页的有什么不同？

      • PC屏幕大，网页固定版心

      • 手机屏幕小， 网页宽度多数为100%

    • 如何在电脑里面边写代码边调试移动端网页效果？

      • 谷歌模拟器

  • 谷歌模拟器

    • 使用谷歌模拟器调试移动端网页

  • 屏幕尺寸

  • 概念

    • 指的是屏幕对角线的长度，一般用英寸来度量

  • 分辨率

    • PC分辨率

      • 1920 * 1080

      • 1366 * 768

      • ......

    • 缩放150%

      • （1920/150%）*（1080/150%）

    • 总结

      • 硬件分辨率（出厂设置）

      • 缩放调节的分辨率（软件设置）

    • 分辨率分类

      • 物理分辨率是生产屏幕时就固定的，它是不可被改变的

      • 逻辑分辨率是由软件（驱动）决定的

    • 制作网页参考物理分辨率还是逻辑分辨率？

      • 逻辑分辨率

  • 视口

    • 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

    • 手机屏幕尺寸都不同， 网页宽度为100%

    • 网页的宽度和逻辑分辨率尺寸相同。

    • 默认情况下，网页的宽度和逻辑分辨率相同吗？

      • 不同， 默认网页宽度是980px。

    • 目标：网页宽度和设备宽度(分辨率)相同。

    • 解决办法：添加视口标签。

    • 视口：显示HTML网页的区域，用来约束HTML尺寸。

      • viewport：视口

      • width=device-width：视口宽度 = 设备宽度

      • initial-scale=1.0：缩放1倍（不缩放）

  • 二倍图

    • 能够使用像素大厨软件测量二倍图中元素的尺寸

    • 图片分辨率, 为了高分辨率下图片不会模糊失真

    • 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

    • 二倍图设计稿尺寸：750px。

百分比布局

  • 百分比布局

    • 百分比布局， 也叫流式布局

    • 效果： 宽度自适应，高度固定。


    <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>京东title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .toolbar {
                position: fixed;
                left: 0;
                bottom: 0;
                /* 百分比布局  流式布局 */
                width: 100%;
                height: 50px;
                background-color: pink;
                border-top: 1px solid #ccc;
            }
            
            .toolbar li img {
                height: 100%;
            }
    ?
            .toolbar li {
                float: left;
                /* 百分比布局  流式布局 */
                width: 20%;
                height: 50px;
            }
        style>
    head>
    ?
    <body>
        <div class="toolbar">
            <ul>
                <li>
                    <a href="#"><img src="./images/index.png" alt="">a>
                li>
                <li>
                    <a href="#"><img src="./images/classify.png" alt="">a>
                li>
                <li>
                    <a href="#"><img src="./images/jd.png" alt="">a>
                li>
                <li>
                    <a href="#"><img src="./images/car.png" alt="">a>
                li>
                <li>
                    <a href="#"><img src="./images/login.png" alt="">a>
                li>
            ul>
        div>
    body>
    ?
    html>

Flex布局

  • Flex布局

    • 够使用Flex布局模型灵活、快速的开发网页

    • 多个盒子横向排列使用什么属性？

      • 浮动

    • 设置盒子间的间距使用什么属性？

      • margin

    • 需要注意什么问题？

      • 浮动的盒子脱标

  • Flex布局/弹性布局：

    • 是一种浏览器提倡的布局模型！！！

    • 布局网页更简单、灵活

    • 避免浮动脱标的问题

  • Flex布局模型构成

    • 作用

      • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

      • Flex布局非常适合结构化布局

    • 设置方式

      • 父元素添加 display: flex，子元素可以自动的挤压或拉伸

    • 组成部分

      • 弹性容器（父级）

      • 弹性盒子（子级）

      • 主轴

      • 侧轴 / 交叉轴


    <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>体验flex布局title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            .box {
                /* 视觉效果: 子级一行排列/水平排列 */
                /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
                display: flex;
                height: 200px;
                border: 1px solid #000;
            }
    ?
            .box div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        style>
    head>
    <body>
        <div class="box">
            <div>1div>
            <div>2div>
            <div>3div>
        div>
    body>
    html>

  • 主轴对齐方式

    • 使用justify-content调节元素在主轴的对齐方式

    • 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

    • 修改主轴对齐方式属性: justify-content


    <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>主轴对齐方式title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            .box {
                display: flex;
    ?
                /* 居中 */
                justify-content: center;
    ?
                /* 间距在弹性盒子(子级)之间 */
                justify-content: space-between;
    ?
                /* 所有地方的间距都相等 */
                justify-content: space-evenly;
    ?
                /* 间距加在子级的两侧 */
                /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
                justify-content: space-around;
                
                height: 200px;
                margin: auto;
                border: 1px solid #000;
            }
            
            .box div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        style>
    head>
    ?
    <body>
        <div class="box">
            <div>1div>
            <div>2div>
            <div>3div>
        div>
    body>
    ?
    html>

  • 侧轴对齐方式

    • 使用align-items调节元素在侧轴的对齐方式

    • 修改侧轴对齐方式属性:

      • align-items（添加到弹性容器）

      • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）


    <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>侧轴对齐方式title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            .box {
                display: flex;
    ?
                /* 居中 */
                /* align-items: center; */
    ?
                /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
                /* align-items: stretch; */
    ?
                height: 300px;
                margin: auto;
                border: 1px solid #000;
            }
            
            .box div {
                /* width: 100px; */
                /* height: 100px; */
                background-color: pink;
            }
    ?
            /* 单独设置某个弹性盒子的侧轴对齐方式 */
            .box div:nth-child(2) {
                align-self: center;
            }
            
        style>
    head>
    ?
    <body>
        <div class="box">
            <div>1111div>
            <div>2div>
            <div>3div>
        div>
    body>
    ?
    html>

  • 伸缩比

    • 使用flex属性修改弹性盒子伸缩比

      • 属性

        • flex : 值;

      • 取值分类

        • 数值(整数)

    • 注意 : 只占用父盒子剩余尺寸


    <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>Documenttitle>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            .box {
                display: flex;
    ?
                height: 300px;
                border: 1px solid #000;
            }
    ?
            .box div {
                height: 200px;
                margin: 0 20px;
                background-color: pink;
            }
    ?
            .box div:nth-child(1) {
                width: 50px;
            }
    ?
            .box div:nth-child(2) {
                /* 占用父级剩余尺寸的份数 */
                flex: 3;
            }
    ?
            .box div:nth-child(3) {
                flex: 1;
            }
            
        style>
    head>
    <body>
        <div class="box">
            <div>1div>
            <div>2div>
            <div>3div>
        div>
    body>
    html>

     

移动web

相关

移动web_平面转换

标签