菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 零基础前端-辛洋-20240426 [打印本页]

作者: 肤浅1543 时间: 2023-4-27 00:12
标题: 零基础前端-辛洋-20240426
移动端的基础

移动端的调试方法
      1、使用谷歌开发者工具 Chrome DevTools的模拟手机调试
      2、搭建本地服务器，手机和服务器在一个局域网内
      3、使用外网服务器，直接用IP来进行访问

Live Server的基本使用
      1、下载插件
      2、修改IP为自己电脑的IP地址
         查询IP，打开CMD 输入ipconfig
         将ip地址填写到自己的live server服务中

      3、通过live server打开网页即可，注意默认的端口是5500  如果端口被占用需要先修改端口

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

布局视口
      一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起PC端页面在手机上的显示问题，IOS 和 Android都是980px，所以PC端的页面在手机上显示元素看起来都比较小，一般情况下可以通过手动来缩放网页。

视觉视口
      指的是用户正在看到的网站的区域，注意：是正在看到的网站区域，不一定是网站的全部区域，我们是可以通过缩放来控制视觉视口的，但是不会影响布局视口，布局视口仍然是原来的尺寸。

理想视口
      为了使网站在移动端有最理想的浏览和阅读宽度而设定的视口，需要手动添加meta标签来控制视口的设置
      meta视口标签的主要目的：布局视口和视觉视口的宽度保持一致，简单来说就是设备有多宽，移动端页面的布局页面就有多宽。

meta视口标签的使用
      常用属性
         width
            宽度设置的是viewport宽度，可以设置成device-width的特殊值

         initial-scale
            初始的缩放比例  设置为大于0的数字，一般是1

         maximum-scale
            最大的缩放比例，设置为大于0的数字，一般是1

         minimum-scale
            最小的缩放比例，设置为大于0的数字，一般是1

         user-scalable
            是否允许用户缩放，yes/1 或者 no/0

         标准的视口标签

物理像素和物理像素比
      物理像素点指的是屏幕显示的最小颗粒，是真实存在的，在设备出厂的时候就设置好的，比如iphone14 pro 的是2556 x 1179
      实际开发过程中一个px单位不一定是等于一个物理像素点的
      因为有物理像素比的存在，将一张100px×100px的图片放到手机里会按照物理像素比进行放大。
      如果出现了图片模糊的情况，我们一般会按照如下方式解决
         如果要将一个100×100的图片放到移动端，假设物理像素比是2
         就可以将这个图片先缩小为50px×50px的图片，然后再进行插入即可。

      多倍图
         当物理像素比是2的时候，那么可以将图片进行缩小2倍，然后进行使用的方式来让图片更加清晰
         如果物理像素比3的时候，那么可以将图片缩小3倍，然后进行使用
         所以倍图的使用是根据物理像素比的变化而变化的。
移动端常见布局方案
1、单独来制作移动端（主流）
      流式布局
      flex弹性布局
      less+rem+媒体查询
      混合布局

2、响应式布局（次要）
      媒体查询
      Bootstrap

流式布局
概念
      流式布局就是百分比布局，也叫做非固定像素布局
      通过盒子的宽度设置为百分比来根据屏幕的宽度来自适应调整，不受固定像素的限制。

二倍精灵图的使用
      1、插入背景图
      2、将背景图按物理像素比进行等比例缩小（利用background-size属性）
      3、利用ps进行缩小后的图片测量，使用background-position进行背景位移即可

Flex弹性布局
Flex布局的原理
      传统布局和flex布局的区别
         传统布局
            传统布局的兼容性更好
            布局会比较的繁琐
            局限性，在移动端中布局的速度相对较慢

         flex布局
            操作会比较的方便，布局很简单，移动端使用很广泛
            PC端的浏览器可能会有兼容性的问题，IE11以下的低版本浏览器对flex支持情况不好

         总结
            PC端布局主要采用传统方式
            移动端布局或者PC端不考虑兼容性的时候，使用flex布局

      原理
         flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
         当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
         采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）

Flex布局的父项常见属性
      flex-direction
         设置主轴方向
         常用属性值
            row  默认值，子元素沿x轴从左向右排列
            row-reverse 子元素沿x轴从右向左进行排列
            column 子元素沿y轴从上到下进行排列
            column-reverse 子元素沿y轴从下到上进行排列

         在flex布局中x轴和y轴分别是水平向右和垂直向下的
         x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性

      justify-content
         控制主轴子元素的排列方式
         常用属性值
            flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
            flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
            center 控制子元素沿主轴居中对齐
            space-around 控制子元素平分主轴剩余空间
            space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间

      flex-wrap
         设置子元素是否换行
         在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行设置

      align-items
         设置主轴的子元素排列方式（单行）
         常用属性值
            flex-start 从侧轴头部开始排列
            flex-end 从侧轴尾部开始排列
            center 沿侧轴居中排列
            stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
      align-content
         设置侧轴上的子元素的排列方式（多行）
         常用属性值
            align-content: flex-start;
                  默认值：沿侧轴头部开始排列

            align-content: flex-end;
                  沿侧轴尾部开始排列

            align-content: center;
                  沿侧轴居中对齐

            align-content: space-around;
                  侧轴上的多行子元素平分侧轴剩余空间

            align-content: space-between;
                  侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间

            align-content: stretch;
                  侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）

      aligin-items和align-content的区别
         algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
         algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。

      flex-flow
         是flex-direction flex-wrap的复合属性
         属性值：flex-direction flex-wrap

Flex布局的子项常见属性
      flex子项占的份数

      align-self 控制子项自己在侧轴上的排列方式
         可以控制单个子元素和其他的子元素有不同的对齐方式，可以覆盖align-items属性。
      order 属性来定义子项的排列顺序
         默认值是0 数值越小越靠前

网页制作思路
技术选择flex布局方式来实现
搭建文件
      css
      images
      font
      index.html

书写视口标签

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)