flex 弹性布局+rem布局

·  阅读 420

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>
​
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改