周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

移动端页面布局

2022-08-07 153点热度 0人点赞 0条评论

1、移动端布局

——移动端的特点

手机屏幕小,一般的宽度直接设置为100%,不需要固定版心

  • 分辨率

    屏幕的尺寸:指的是对角线的长度,一般用英寸来测量

    PC分辨率:1920*1080 指代的是电脑屏幕能排列像素点的个数(分为物理分辨率和逻辑分辨率)

    ​ 编写代码参照的是逻辑分辨率

——视口

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

// 新建html代码时候自动生成,使得网页的宽度等于逻辑分辨率的尺寸
// 如果没有视口标签,网页的宽度是980px
<meta name="viewport" content="width=device-width, initial-scale=1.0">

// pc端也有视口的概念,但是pc端视口默认就是和屏幕分辨率大小一致,不需要进行处理

——二倍图

为了高分辨率下图片不会失真,设计师一般设计750px的图

使用像素大厨软件切换到二倍图下进行测量尺寸

——百分比布局

也可以叫做流式布局

效果:宽度自适应、高度固定(以前的布局方案)

——Flex布局

1、浮动布局会产生脱标的问题,flex布局则不会产生这类问题,非常适合结构化布局
  • flex布局是浏览器提倡的布局模型
  • 布局网页更加简单、灵活
  • 避免浮动脱标的问题
2、使用方式:
  • 父元素添加display:flex,子元素可以自动挤压或拉伸

组成部分:

  • 弹性容器、弹性盒子、主轴(默认水平)、侧轴/交叉轴(默认垂直)
3、排列方式:
  • 默认情况下:主轴默认水平方向,弹性盒子按照主轴方向排列

  • 主轴对齐方式:

    justify-content调节弹性盒子在主轴的对齐方式
    // 属性值
    flex-start        // 起点开始依次排列(默认值)
    flex-end      // 终点开始依次排列
    center            // 沿主轴居中排列,盒子中间无间距
    space-around  // 间距添加在盒子两侧,盒子之间间距是盒子与容器间距的两倍
    space-between // 弹性盒子沿主轴均匀排列,间距在盒子之间,两侧无间距
    space-evenly  // 弹性盒子沿主轴均匀排列,所有间距相等
  • 侧轴对齐方式

    align-items调节“所有弹性盒子”在侧轴的对齐方式
    // 属性值
    flex-start        // 默认值,起点位置依次排列
    flex-end      // 终点开始依次排列
    center            // 沿侧轴居中排列
    stretch           // 拉伸弹性盒子等于弹性容器(默认值,前提是弹性盒子没有高度)
  • 上边两种都是添加到弹性容器上的属性,align-self添加到弹性元素身上

    align-self控制“某个单独的弹性盒子”在侧轴的对齐方式
    // 属性值与align-items相同
4、弹性盒子尺寸的特点:
  • 若是弹性盒子没有高度,且aligh-items为默认值(拉伸),高度就会是弹性容器高度
  • 若是弹性盒子没有宽度,弹性容器宽度按照内容的多少进行改变
5、伸缩比(伸缩比属性是添加给弹性盒子的)
  • 使用flex属性修改弹性盒子伸缩比(flex表示占用弹性容器剩余尺寸的份数)
6、修改主轴方向
  • 主轴默认在水平方向,使用flex-direction改变弹性盒子的主轴方向,实现内容垂直排列

    // 属性
    row               // 行,水平(默认值)
    column            // 列,垂直
    row-reverse       // 行,水平,从右向左
    column-reverse    // 列,垂直,从下往上
7、弹性盒子的换行

使用flex-wrap实现弹性盒子多行排列效果

flex布局模型默认是不会换行的,弹性盒子可以自由伸缩,所有的弹性盒子缩放后在一行显示

// 属性
nowrap          // 默认值,不换行
wrap            // 换行
8、调整行的对齐方式

使用align-content调整行的对齐方式

// 属性值与justify-content基本一致,但是没有space-evenly属性
// 默认值是space-between

2、移动适配

移动适配指的是页面元素的宽度随着设备宽度发生动态变化

——rem解决方案

1、rem

目标:能够使用rem单位设置网页元素的尺寸

  • rem是一个相对单位
  • 相对于html标签自号计算尺寸
  • 1rem = 1HTML字号大小

使用:使用时候先设置html字号大小,宽高=rem * font-size

  • 如何动态设置不一样的字号大小:

    使用媒体查询

  • 设备不同字体大小设置多少合适:

    在rem方案中,默认将网页分成10等份。字号设置为视口宽度的1/10

2、媒体查询

媒体查询能够检测视口宽度,设置差异化css样式

@media (媒体特征) {
    选择器 {
        css属性
    }
}
// 例如
@media (width: 320px) {
    html {
        font-size: 32px
    }
}

这样写只能适配单个的屏幕大小,所以可以使用flexible.js适配移动端框架

3、flexible.js

原理:根据不同的视口宽度给网页中的根节点设置不同的字体大小

使用:将js文件引入后便可以实现适配效果,可以使用rem单位

4、less的使用

less是一个css的预处理器,可以使得css具备一定的逻辑和计算能力

  • 因为rem需要进行计算,但是css不支持计算写法,所以可以使用less进行预处理

  • 注意:浏览器不识别less文件,编写的是less文件网页引入的还是css文件

  • 注释

    • 双斜线——单行注释(Ctrl + /)

    单行注释无法生成到css中

    • / 注释内容 /——块注释(Shift + Alt + A)
  • 计算

    • 加减乘直接书写计算表达式
    • 除法需要添加括号,或者在 “ / ” 之前加一个点
  • less嵌套

    • 为了快速生成后代选择器,less支持选择器的嵌套

    • & 不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用

  • 变量

    • 网页文字颜色一般都是一致的,所以可以定义一个颜色变量,在其他地方调用
    • 作用:存储数据、方便使用和修改
    • 定义变量:@变量名:值
    • 使用变量:css属性:@变量名
  • less文件支持导入语法

    • @import "文件路径"; 一般都添加在less文件的开头位置

    可以将ess文件内容导入(如果导入的是less文件,可以省略后缀)

  • 使用less语法导出css文件

    • css默认导出在less同级目录,可以通过导出自定义导出位置

    • 方法一:配置插件

      // settings.json配置文件
      "less.compile": {
        "out": "../css/",
      }
    • 方法二:书写导出代码

      // less文件首行添加单行注释
      添加:"// out: ../css/"
      // 可以将css导出到与less文件夹同级的css文件夹中
      //css后还可以指定导出文件名
      // 有的less文件需要被其他less文件引入,不需要导出css
      添加:"// out: false"

——vw/vh,未来的解决方案

使用vh/vw元素设置网页元素的尺寸

  • 相对单位,相对视口尺寸计算元素尺寸
  • 单位全名:viewport width / viewport height
  • 1vw = 1 / 100视口宽度,vh = 1 / 100视口高度

设置盒子宽高时候,可以使用vh,也可以使用vw

  • 如果进行了混用:
    • 部分手机存在全面屏,宽度相同,但是全面屏高度会大一些,混合使用会造成宽高比例不同

——vw/vh和rem相同点

1、rem

元素的像素大小 / 页面字体大小(视口宽度/10)= rem的值

2、vh / vw

元素像素大小 / 每vw(vh)的像素大小 = vh(vw)的值

3、响应式

——媒体查询

与移动适配媒体查询不同,响应式中媒体特性不会检测视口准确宽度,而是检测宽度范围

  1. max-width(小于等于某一宽度)
    // 视口宽度小于等于800px时背景色为粉色
    @media (max-width:800px) {
    body {
        background-color: pink
    }
    }
  2. min-width(大于等于某一宽度)
    // 大于768==>  粉色
    // 大于992==>  绿色
    // 大于1200==>天蓝色
    @media (min-width:768px) {
    body {
        background-color: pink
    }
    }
    @media (min-width:992px) {
    body {
        background-color: green
    }
    }
    @media (min-width:1200px) {
    body {
        background-color: skyblue
    }
    }
    媒体查询本质上仍是css,具有层叠性。大于768的全部设置为粉色,大于992的样式将粉色层叠掉,实现只有768~991设置粉色
    // 所以,以上代码如果不按顺序书写,失去层叠作用,无法实现响应式效果

    ​ 所以可以发现,min-width从小到大写,max-width从大到小写

  3. 媒体查询完整写法(了解)

    @media 关键词 媒体类型 and (媒体特性) {css样式}
    ——关键词

    • and(多个媒体特性,用and连接)
    • only(只有一个媒体特性)
    • not(非,判断不是某个条件)

    ——媒体类型

    • screen(带屏幕的设备)
    • print(打印预览模式)
    • speech(屏幕阅读模式)
    • all(默认值,包括以上三种情形)

    ——媒体特征

    • width、height(视口的宽高)
    • max-width、max-height(视口最大宽高)
    • min-width、min-height(视口最小宽高)
    • orientation(屏幕方向)
      • portrait(竖屏)
      • landscape(横屏)
  4. 外链引入媒体查询css
    
    // 一般只使用媒体特性
    // 外链引入媒体查询属性可以使特定情况下样式生效
    // 注意:媒体特性必须添加括号

——BootStrap

使用BootStrap框架开发响应式网页

1、样式使用
  • 引入boootstrap.css样式表
  • 使用样式中定义的类名
2、插件的使用
  • 引入jquery.js
  • 引入框架js文件(bootstrap.min.js)
  • 使用框架插件
2、官方文档

​ [BootStrap中文文档](Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com))

标签: 响应式 移动端
最后更新:2022-08-08

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
下一篇 >

文章评论

取消回复
目录
  • 1、移动端布局
        • ——移动端的特点
        • ——视口
        • ——二倍图
        • ——百分比布局
        • ——Flex布局
            • 1、浮动布局会产生脱标的问题,flex布局则不会产生这类问题,非常适合结构化布局
            • 2、使用方式:
            • 3、排列方式:
            • 4、弹性盒子尺寸的特点:
            • 5、伸缩比(伸缩比属性是添加给弹性盒子的)
            • 6、修改主轴方向
            • 7、弹性盒子的换行
            • 8、调整行的对齐方式
  • 2、移动适配
        • ——rem解决方案
            • 1、rem
            • 2、媒体查询
            • 3、flexible.js
            • 4、less的使用
        • ——vw/vh,未来的解决方案
        • ——vw/vh和rem相同点
            • 1、rem
            • 2、vh / vw
  • 3、响应式
        • ——媒体查询
            • max-width(小于等于某一宽度)
            • min-width(大于等于某一宽度)
            • 媒体查询完整写法(了解)
            • 外链引入媒体查询css
        • ——BootStrap
            • 1、样式使用
            • 2、插件的使用
            • 2、官方文档

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号