一名前端小白的学习笔记(1/N)--移动端

最新推荐文章于 2024-05-26 15:41:02 发布

VVVVainz

最新推荐文章于 2024-05-26 15:41:02 发布

阅读量324

点赞数 1

本文链接：https://blog.csdn.net/VVVVainz/article/details/103421276

版权

传统布局
- 兼容性好
- 布局繁琐
- 局限性：不能再移动端很好的布局
单独制作移动端页面（主流）
响应式页面（其次）
- 制作麻烦，需要花精力去调兼容性问题
移动端技术解决方案
- 浏览器私有前缀只需要考虑-webkit
- css初始化normalize.css
- CSSS盒子模型：padding和border不会撑大盒子了
  - 传统盒子模型：盒子长宽+padding+border
    - box-sizing:cotent-box;
  - 变成csss盒子
    - box-sizing:border-box;
移动端常用布局
- 移动端技术选型
  - 布局方式
- 技术
标准viewport视口
- 浏览器显示内容的屏幕区域
- 布局视口
  - 用于解决早期的pc端页面在手机上显示的问题
  - ios和Android基本设置为980px
- 视觉视口
  - visual viewport
  - 用户正在看到的网站的区域
- 理想视口
  - 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  - 需要手动添加meta视口标签和浏览器操作
    - 目的:布局视口的宽度应该和理想视口的宽度一致
- meta视口标签
  - <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 ">
二倍图
- 物理像素比
  - 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，就是平时说的分辨率
  - 1px开发像素=x物理像素
  - 1个px能显示的物理像素点点数，就是物理像素比
- 我们是采取的是放一个100*100的图片，然后手动吧这个图片缩小为50*50（css）像素’
- 我们准备的图片比我们实际需要的大小大1倍，这种方式就是2倍图
二倍精灵图
- 把精灵图等比缩放成50%
- 在进行测量
- 代码中的background-size也进行缩放
流式布局
- 就是百分比布局，也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容想两边填充
- 是web开发比较常见的布局方式
- max-width
- min-width
- 圣杯布局
  - 两边固定，中间可以伸缩
flex布局
- 特点
  - 操作方便
  - pc端支持笔记比较差
  - ie11或更低版本不支持flex或仅支持部分
  - 如果是移动端或者是不考虑兼容的pc则采用flex
- flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
- 采用 Flex 布局的元素，称为 Flex 容器（flexc ontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。
- 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
- flex-direction：设置主轴的方向
  - row
    - 默认值从左到右
  - row-reverse
    - 从右到左
  - column
    - 从上到下
  - column-reverse
    - 从下到上
- justify-content：设置主轴上的子元素排列方式
  - flex-start
    - 默认值从头部开始如果主轴是x轴则从左到右
  - flex-end
    - 从尾部开始排列
  - center
    - 在主轴居中对齐
    - 如果主轴是x轴则水平居中
  - space-around
    - 平分剩余空间
  - space-between
    - 先两边贴边在平分剩余空间
- flex-wrap：设置子元素是否换行
  - nowrap默认
    - 不换行
    - 缩小子元素(非同比例缩小)以强制一行显示
  - wrap
    - 换行
- align-content：设置侧轴上的子元素的排列方式（多行）
  - flex-start 默认值从侧值的头部开始排列
  - flex-end 从侧值的尾部开始排列
  - center在侧轴中间显示
  - space-around子项在侧轴平分剩余空间
  - space-between子项在侧轴先分布在两头，在平分剩余空间
  - stretch 设置子项元素高度平分父元素高度
- align-items：设置侧轴上的子元素排列方式（单行）
  - 该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用
  - flex-start 从头部开始
  - flex-end 从尾部开始
  - center 居中显示
  - stretch 拉伸（但是子元素不要给高度）
- align-content 和align-items区别
  - align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  - align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找 align-content
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
- flex 属性定义子项目分配剩余空间，用flex来表示占多少份数
  - 重点：分配剩余空间
  - flex-grow (default:0)
    - 就是索取父容器的剩余空间，默认值是0
  - flex-basis (default:auto)
    - 同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高。有一点需要注意，如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高
    - tips:flex-basis和width为auto值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多。
  - flex-shrink (default:1)
    - 当前容器不能跟随元素时，子元素跟随谁的权重
- align-self控制子项自己在侧轴上的排列方式
  - align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
  - 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
- order 属性定义项目的排列顺序
  - 数值越小，排列越靠前，默认为0
rem适配布局
- 1.em相对于父元素的字体大小来说
- 2.rem相对于html元素的字体大小来说
- 3.rem的优点，就是可以通过修改html的文字大小来改变页面中的元素的大小
媒体查询
- 引入资源
  - 根据不同的屏幕引入不同的资源
  - 最好的方法是从小到大
  - <link rel="" href="" media="screen/all/print and/not/or (max-width/width/min-width)0">
- @media screen/all/print and/not/or (max-width/width/min-width) {}
- 媒体查询可以根据不同的屏幕尺寸在改变不同的样式
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
- CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS 没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器
- 在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本
- 常见的CSS预处理器：Sass、Less、Stylus
- Less是一门 CSS 预处理语言，它扩展了CSS的动态特性
- 变量
  - 必须有@为前缀
  - 不能包含特殊字符
  - 不能以数字开头
  - 大小写敏感
- less嵌套，子元素格式直接写在父元素里边就行了
- 交集|伪类|伪元素选择器
  - 利用&进行连接
- 任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
- 运算符中间左右有个空格隔开
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
- rem适配方案
  - 一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
  - 媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
  - 技术方案：
    - 1.less+rem+媒体查询
    - 2.lflexible.js+rem
响应式布局
- 特点
  - 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的.
  - 它为开发人员创建接口提供了一个简洁统一的解决方案。
  - 它包含了功能强大的内置组件，易于定制。
  - 它还提供了基于 Web 的定制。
  - 它是开源的。
- bootstrap
  - 自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
  - 所有的主流浏览器都支持 Bootstrap。
- Bootstrap 包的内容
  - js
  - css
- 响应式图像'
  - <img src="" class="img-responsive" alt="" >
  - .img-responsive { display: inline-block; height: auto; max-width: 100%; }
- 全局显示、排版和链接
  - 基本的全局显示
    - body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; }
  - 排版
    - 使用 @font-family-base、 @font-size-base 和 @line-height-base属性作为排版样式。
  - 链接样式
    - 通过属性 @link-color设置全局链接的颜色
    - a:hover, a:focus { color: #2a6496; text-decoration: underline; }
    - a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
  - 避免浏览器的不一样
    - Bootstrap 使用 Normalize 来建立跨浏览器的一致性
    - 由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的
    - Bootstrap 4 中除了可以使用 .container 类来包裹页面上的内容，还可以使用 .container-fluid 类，它用于 100% 宽度，占据全部视口（viewport）的容器。
- 网格系统
  - Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类
  - 移动设备优先策略
    - 内容
      - 决定什么是最重要的。
    - 布局
      - 优先设计更小的宽度。
      - 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
    - 渐进增强
      - 随着屏幕大小的增加而添加元素。
    - 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
  - 工作原理
    - 行必须放置在 .container class 内（在 Bootstrap 4 中还可以放置在 .container-fluid (全屏宽度) class的容器中），以便获得适当的对齐（alignment）和内边距（padding）。
    - 使用行来创建列的水平组。
    - 内容应该放置在列内，且唯有列可以是行的直接子元素。
    - 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
    - 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
    - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。
    - xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大
  - 媒体查询
    - @media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    - 媒体查询有两个部分，先是一个设备规范，然后是一个大小规则
  - 基本结构
    - <div class="container">
      - <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
      - </div>
      - <div class="row">...</div>
      - </div>
    - <div class="container">....
  - 响应式的列重置
  - 偏移列
    - offset-XX-*
      - 将列的左外边距增加*列,范围从1到11