flex 弹性布局+rem布局

吓死羊了
1,203 阅读14分钟

meta视口标签（骨架标签）

4

最标准的viewport设置

  • 视口宽度和设备保持一致
  • 视口的默认缩放比例1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例1.0
  • 最小允许的缩放比例1.0

去除图片的空白缝隙

在设置图片边框样式中，图片或者表单等行内元素，这样会造成一个问题，就是图片底侧以及图片与图片之间会有一个空白缝隙。原因是行内元素之间的回车符系统默认为一个空格，占据了一定宽度。

  • 图片默认与文字的基线对齐 需要使用 vertical-align: middle

1.给img 添加vertical-align:middle | top等等。 让图片不要和基线对齐。（只能修改图片底部的间隙）

img{
            /*vertical-align: bottom;*/
            vertical-align: top;
        }

2.给img的父元素设置与img相同的固定高度（只能修改图片底部的间隙）

div{
         border: 1px solid red;
         height:280px ;
        }

3.给img 添加 display：block; 转换为块级元素就不会存在问题了，水平方向设置浮动。

 img{
        display: block;
        float: left;
    }

4.给img的父元素设置字体大小为0px，若父元素还有其他字体元素，再单独设置字体大小覆盖。（推荐使用）

div{
            border: 1px solid red;
            font-size: 0;
        }

二倍图

二倍图：将设计图设计比成实际尺寸的二倍，解决在设备中的图片模糊的问题

  • 屏幕尺寸：指的是屏幕对角线的长度

  • 设备的大小：1366*768 px

    指的是水平方向有1366个像素点，在垂直方向有768个像素点

  • 像素密度：每英寸所能容纳像素点的个数（像素密度越大，画面越精细，反之越粗糙 ）

  • 物理像素与物理像素比

    物理像素点指的是屏幕显示的最小颗粒 ，由于视网膜屏幕的显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕的细腻程序，使用画质更清楚。

  • 物理像素也称为分辨率

  • 二倍精灵图的做法

    • 将精灵图等比例缩小为原来的一半
    • 之后根据大小 测量坐标
    • 注意代码里面 background-size也要写：精灵图原来宽度的一半

图片格式

  • DPG图片压缩技术

    • 特点：压缩后的图片，可节省用户近50%的浏览流量，提升了访问速度，也能兼容jpeg，DPG图片与webp图片的清晰度对比没有差距

  • webp图片格式

    • webp图片是一种加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3、并能节省大量的服务器宽带资源和数据空间

Css初始化

  • 移动端 CSS 初始化推荐使用 normalize.css/
  • Normalize.css：保护了有价值的默认值
  • Normalize.css：修复了浏览器的bug
  • Normalize.css：是模块化的
  • Normalize.css：拥有详细的文档
  • 官网地址： necolas.github.io/normalize.c…

背景缩放 background-size

background-size属性为背景图片的尺寸

background-size: 宽度|高度|百分比|cover|contain
  • cover将背景图片 等比例拉伸至覆盖背景区域，可能背景图片会显示不全。
  • contain 将背景图片等比例拉伸，只要有高度或宽度有一个条件占满背景区域，就会停止拉伸，可能背景区域会有部分空白

css3 盒模型 box-sizing

  • 传统的盒模型为：盒子的宽度=padding+width +border

  • css3的盒模型为 : 盒子的宽度=width (其中width包含 padding 和 border ）

    • 在css3的盒模型中，padding和border不会撑大盒子
    /*CSS3盒子模型*/
box-sizing: border-box;

注意：pc需要完全兼容，则不能使用css3的盒模型，如果不考虑兼容性我们就选择CSS盒子模型。

常见的移动端布局

  1. 流式布局（百分百布局）
  2. flex 弹性布局（ 强烈推荐）
  3. less+rem 媒体查询布局
  4. 混合布局

响应式

  • 媒体查询

    • bootstarp

流式布局

  • 通过给盒子设置百分比宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • max-width 限制最大宽度 (max-height 最大高度）
  • min-width 限制最小宽度 (min-height 最小高度)

flex 弹性布局

flex是flex 是 flexible Box 的缩写，意为弹性布局

  • 当父元素设置的 flex弹性而已 ,子元素的float、clear 和 vertical-align 属性将失效
  • 通过给父元素添加flex属性，控制子元素的位置和排列方式。

父元素常用属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction 设置主轴方向

  • 默认主轴的方向是 x 轴方向，从左往右
  • 默认侧轴的方向就是 y 轴方向，从上往下
  • 注意：主轴和侧轴可以相互转换，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而子元素则是以主轴排列的。

1

2

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

  • 添加给父元素 justify-content 设置子元素的排列方式
  • 注意：使用这个属性之前一定要确定好主轴是哪个
属性值说明
flex-start默认值 从头部开始 如果主轴是x轴、则从左到右
flex-end从尾部开始排列
center在主轴居中对齐 （如果主轴是x轴则水平居中）
space-around平分剩余空间
space-between先两边贴边 再平分剩余空间

flex-wrap 设置子元素是否换行

  • 默认情况下，子元素都排列在主轴上 flex布局默认是不换行的
  • 设置 flex-wrap：wrap 则可以换行
属性值说明
nowrap默认值 不换行
wrap换行

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

  • 该属性是控制子元素在侧轴(y) 的排列方式，（单行使用）
  • 设置 justify-content（主轴x) 水平居中 与设置 align-items(侧轴y)垂直居中 可实现 水平垂直居中
属性值说明
flex-start默认值 从上到下
flex-end从下到上
center在y侧轴 居中对齐
stretch拉伸

align-content 设置侧轴上的子元素的排列方式（多行）

  • 该属性是控制子元素在出现换行（多行) 的排列方式, 在单行下是没有效果的 （多行使用）

    属性值说明
    flex-start默认值 在侧轴的头部开始排列
    flex-end在侧轴的尾部开始排列
    center在侧轴中间显示
    space-around子项在侧轴平分剩余空间
    space-between子项在侧轴先分布在两头、再平分剩余空间
    stretch设置子项元素高度平分父元素高度

align-content 和align-items区别

  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items 多行找 align-content

flex-flow 复合属性

  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

     flex-flow:row wrap;

子元素常用属性

flex属性

  • flex属性定义子元素分配剩余空间，用flex属性表示 子元素在父元素中占多少份

    .item{
   flex: <number>: /*default 0*/
}

align-self 控制子元素在侧轴上的排列方式

  • align-self 属性允许 设置子元素 的对齐方式，可覆盖父元素的 align-items 属性
  • span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}
属性值说明
flex-start默认值 从上到下
flex-end从下到上
center在y侧轴 居中对齐
stretch拉伸

order 属性定义子元素之间的排列顺序

  • 数值越小，排列越靠前，默认为0
  • 注意：和z-index不一样
.item {
    order: -1 ;  /*order可设置负值*/ 
}

媒体查询

什么是媒体查询 ?

  • @media可以随屏幕的大小设置不同的样式
  • 使用 @media查询，可以针对不同的媒体类型定义不同的样式

媒体查询的语法规范

  • 媒体查询的规范是 从小到大或大到小的顺序来写的

  • 用 @media 开头 注意 @符号 是用来声明
  • mediatype 媒体查询类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含
// @声明 / 媒体查询类型 /关键字 / 媒体特性 
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

  1. mediatype 查询类型

    • 将不同的设备划分成不同的类型，称为媒体查询类型

      值说明
      all用于所有设备
      print用于打印机和打印预览
      scree用于电脑屏幕、平板电脑、智能手机等

  2. and not only关键字

    • 关键字用于,将媒体类型或多个媒体特性连接到一起做为媒体查询条件

      值说明
      and可以将多个媒体 特性连接到一起, 相当于 “且 (&&)” 的意思
      not排除某个媒体类型,相当于 “非 ( ! )”的意思 ,可以省略
      only指定某个特定的媒体类型,可省略

  3. media feature 媒体特性

    • 每种媒体类型都具有各自不同的特性、根据不同媒体类型的媒体先进性设置不同的展示风格。

    • 注意；媒体特性需要用小括号包含

      值解释说明
      width定义页面的可视区域的宽度
      min-width定义页面的最小可视区域的宽度
      max- width定义页面的最大可视区域的宽度

媒体查询 之引入资源

  • 当样式比较多繁琐时，可以针对不同的媒体使用不同的css
  • 原理：就是在link中使用媒体查询来判断设备的尺寸，然后引入不同的css文件
/*语法规范*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
/*示例*/
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

rem适配布局

rem的使用

如何现实页面的文字随屏幕的尺寸变化而变化？

如何让元素随屏幕尺寸变化现实元素高度和宽度比例缩放？

  • em 是相对于父元素的font-size的文字大小而变化

  • rem 是相对于根元素 html 的font-size的文字大小 而变化 的

    • 例如：根元素（ html ) 设置 font-size=12px：非元素设置 width: 2rem; 则换成px表示就是 24px

  • 注意 rem的优势：父元素文字大小可能不一致，但是整个页面在只有一个html、可以很好来控制整个页面的元素大小

    /* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

rem适配方案

方案一

less+rem+媒体查询

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

总结

  • 最后的公式：页面元素的rem值=设计稿的元素值(px) / (屏幕宽度/划分的份数)
  • 屏幕宽度/划分的份数 就是html 根元素的font-szie 的大小
  • 或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

方案二

flexible.js+rem

使用

  • 使用js的自动处理，原理是将设备划分成为10等份，但是在不同设备下，比例还是一致的。

  • 下载地址：github地址：github.com/amfe/lib-fl…

  • 使用通过script 标签引入 flexible.js 文件

    //在index.html中引入 flexible.js 文件
<script src="js/flexible.js"><script>

总结

  • flexible.js将屏幕划分成10等份
  • 有了flexible.js文件可根据设备的屏幕大小计算出thml的fort-size的文字大小
  • 页面元素的rem=设计稿的元素大小 / ( 设备屏幕的宽度 / 划分的分数 )、
  • 需要结合 cssrem 的插件一起使用 （cssrem 的px转换成rem）

cssrem插件 （px转换rem）

在vscode 插件商店中搜索 并安装 ，安装完成后需要重新启动vscode

image-20210702121919061

  • 注意：cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置

  • 一般开发中， 默认的16 需要手动修改成( 设备屏幕的宽度 / 划分的分数 )也就是thml的fort-size 的文字大小

  • 修改过程 修改的大小为( 设备屏幕的宽度 / 划分的分数 ) html的fort-size

    6

    image-20210702123605231

Less基础

常见的CSS预处理器有 ，Less、Sass、Stylus

传统css维护弊端

  • css 是标记性语言，没有变量，函数、运算等概念
  • css 不利用于代码的复用、维护及扩展等。css冗余度是比较高的。

Less介绍

  • Less是一门css扩展语言，也成为了css预处理器
  • Less在css语言基础上引入了 变量，函数，运算以及函数功能，大大简写了css的编写。
  • Less出现有利于 css的维护与复用，
  • Less中文网址：http://lesscss.cn/

Less安装

  • ①安装nodejs，可选择版本(8.0)，网址：nodejs.cn/download/
  • ②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） ---输入“node –v”查看版本即可
  • ③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可
  • ④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

@import导入Less文件

//@import导入的意思，可以把less样式文件导入到另一个less样式文件里面
//link则是把 样式文件导入到html里
@import "Less文件路径"

Less 使用之变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;
  • 必须有@为前缀 （@声明变量)
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
//定义css一个粉色的变量
@color: pink;
​
//使用 @color 变量
body{
    color:@color
}
a：hover{
    color:@color
}
  • Less 编译 vocode Less 插件
  • Easy LESS 插件用来把less文件编译为css文件
  • 安装完毕插件，重新加载下 vscode。
  • 只要保存一下Less文件，会自动生成CSS文件。

4

Less嵌套

如果遇见（交集|伪类|伪元素选择器|)

  • 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代
  • 如果有&符号，它就被解析为父元素自身或父元素的伪类
//传统的css写法
a:hover{
   color:red
}
//Less的嵌套
a{
   &:hover{
        color:red;
   }
}

Less运算

  • 任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
  • 对于两个不同的单位的值进行运算，运算结果的值取第一个值的单位
  • 运算符中间需要有空格隔开 例如 1px + 5
/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*甚至使用less的变量@width进行运算 */
width: (@width + 5) * 2;
​

响应式布局

响应式原理

  • 使用媒体查询针对不同宽度设置不同的样式和布局，从而适配不同的设备。

  • 设备的划分情况：

    • 小于768的为超小屏幕（手机）
    • 768~992之间的为小屏设备（平板）
    • 992~1200的中等屏幕（桌面显示器）
    • 大于1200的宽屏设备（大桌面显示器）

响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

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

父容器版心的尺寸划分

  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

 <style>
        /*由于使用媒体查询的方法 元素的宽度根据屏幕的宽度而定*/
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }
        /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
​
<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>
​
avatar
文章
阅读
粉丝