关于CSS的几种移动端布局方式

  • 一、移动端布局
    • 01.meta视口标签设置
    • 02.移动布局的分类有哪些？
    • 03.为什么需要二倍图？
      • （1）物理像素和物理像素比
      • （2）二倍图（根据需要确定多倍图）
      • （3）背景二倍图
    • 04.样式初始化
  • 二、流式布局
    • 01.什么是流式布局？
    • 02.为什么需要流式布局
    • 03.流式布局有什么缺陷？
  • 三、初识flex布局
    • 01.几个概念
    • 02.几个属性
      • （1）父元素的属性
      • （2）子元素的属性
  • 四、关于rem
    • 01.解决问题：
    • 02.相关概念
    • 03.优点
    • 04.rem适配
  • 五、关于媒体查询
    • 01.媒体查询——media query
    • 02.怎么定义
    • 03.如何引入资源
  • 六、初识less语法
    • 01.less简介
    • 02.less变量
    • 03.less编译
    • 04.less嵌套
    • 05.less运算
  • 七、响应式布局

一、移动端布局

01.meta视口标签设置

<meta name="viewport" content="width=device-width,initial-sacle=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >

initial-scale 初识缩放比

user-scalable 用户缩放

maximum-scale 最大缩放比

minimum-scale 最小缩放比

02.移动布局的分类有哪些？

  • 流式布局（百分比布局）
  • 弹性布局（flex）
  • less+rem+媒体查询布局
  • 响应式布局

03.为什么需要二倍图？

（1）物理像素和物理像素比

  • 物理像素：即分辨率，屏幕显示的最小单位

    PC端1个px就是一个物理像素，一一对应的关系

  • 但在移动端1个px不是一个物理像素，不是对应关系

    中间存在一个转换比，即物理像素比

    这是因为移动端的物理像素进行了压缩，分辨率变高

（2）二倍图（根据需要确定多倍图）

如果在移动端直接插入原图，那么由于物理像素比，图片也会被放大，会变模糊，

因此这里需要，先准备原图两倍大小的图片（这里的两倍是指物理像素比，不一定是两倍的），然后手动缩小为一半，那么在移动端显示的时候会放大为两倍，这次放大因为原图先缩小了两倍，那么在放大时即恢复原图大小，就不会变模糊

（3）背景二倍图

用background-size设置图片大小
特别注意精灵图的二倍图转换

04.样式初始化

引入样式：初始化CSS文件

二、流式布局

01.什么是流式布局？

  • 流式布局

    • 也称百分比布局，非固定像素布局

    • 宽度用百分比自适应，高度用像素值固定

    • 搭配最大、最小宽度

      min-width，max-width

02.为什么需要流式布局

  • 浏览器、屏幕尺寸、分辨率不一致

03.流式布局有什么缺陷？

  • 并非所有元素都是自适应的（高度、图片、文字大小等都是固定的）

仿京东首页

三、初识flex布局

01.几个概念

  • flex布局

    即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列

  • 主轴和侧轴

    主轴：即沿着flex元素排列方向所在的轴

    侧轴：垂直于flex元素排列方向的轴

02.几个属性

（1）父元素的属性

设置再父元素中，控制的是子元素的排列

  • 1.flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴

    属性值 描述
    row 水平排列，沿着X轴方向从左到右排列，默认值,
    column 垂直排列，沿着Y轴方向从上到下排列
    row-reverse 水平排列，沿着X轴方向从右到左排列
    column-reverse 垂直排列，沿着Y轴方向从下到上排列

  • 2.justify-content：设置在主轴方向上的子元素的排列方式

    属性值 描述
    flex-start 沿主轴方向从左到右（从上到下）排列，默认值
    flex-end 从主轴方向从右到左（从下到上）排列
    center 居中对齐
    space-around 平均分配剩余空间
    space-between 两端贴边，中间仔平均分配剩余空间

    水平方向：

    垂直方向：

  • 3.flex-wrap：设置子元素是否换行

    属性值 描述
    nowrap 不换行，默认值，缩放父元素，同时也会缩放子元素
    wrap 设置换行

  • 4.align-items：设置在侧轴方向上的单行子元素的排列方式————仅适用于单行

    属性值 描述
    flex-start 从头开始
    flex-end 从后开始
    center 在侧轴上居中对齐
    stretch 拉伸（默认值）

    水平方向：

    垂直方向：

  • 5.align-content：设置在侧轴方向上的多行子元素的排列方式——————适用于多行

    这个属性只有在设置了换行的情况下才使用，且在单行情况下是没有效果的

    即需要搭配flex-wrap:wrap;

    属性值 描述
    flex-start
    flex-end
    center
    space-around
    space-between
    stretch

    水平方向：

    垂直方向：

  • 6.flex-flow：复合属性，同时设置主轴方向和是否换行

  • 语法：
.father {/* 首先要给父元素添加flex */display: flex;width: 100%;height: 200px;/* 父元素中常见的六种属性 *//* 1.设置主轴方向 */flex-direction: row;/* 2.设置在主轴方向上的子元素的排列方式 */justify-content: center;/* 3.设置子元素是否换行 */flex-wrap: nowrap;/* 4.设置在侧轴方向上的单行子元素的排列方式————仅适用于单行 */align-items: center;/* 5.设置在侧轴方向上的多行子元素的排列方式——————适用于多行 */align-content: center;/* 6.复合属性，同时设置主轴方向和是否换行 *//* flex-flow: row nowrap; */
}

（2）子元素的属性

属性值 描述
flex 设置子项元素对剩余空间的分配，每一个子元素项都可单独设置，将所有子元素占的份数加起来，即为占父元素的比例
align-self 单独设置子项自己在侧轴上的排列方式，包括flex-start;flex-end;center;stretch;baseline;
order order控制子项的排列顺序，越小越靠前,默认值为0
  • 语法：
.son{/* 子元素上的属性 *//* 1.设置元素对剩余空间的分配份数 *//* 即，将所有子元素占的分数加起来，然后占父元素宽度的几分之几 */flex: 1;/* 2.设置子项自己在侧轴上的排列方式 */align-self: center;/* 3.order控制子项的排列顺序，越小越靠前，默认为0 */order: inherit;
}

仿携程首页小案例

四、关于rem

01.解决问题：

​ 如何让高度也自适应 ？

02.相关概念

  • em——是相对于父元素的字体大小进行的单位设置，浏览器默认（1em=16px)

  • rem——即root em，是相对于HTML元素（根）的字体大小进行的单位设置

03.优点

  • 每个页面只有1个html标签，可以通过修改HTML中文字大小font-size来改变页面中元素的大小，进行整体控制

  • 文字大小随屏幕大小变化

  • 高度自适应

  • 高度、宽度等比例缩放

04.rem适配

  • 是为了让一些不能等比自适应的元素，在设备尺寸改变时，等比例适配当前设备

  • 主要使用媒体查询，根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化时，元素尺寸也会发生变化，从而达到等比例缩放的适配

  • 用less动态计算并设置html根标签的字体大小

  • 将设计稿中的元素宽、高、位置，按照同等比例换算为rem为单位的值

方法：

  • 首先要有一套标准的屏幕尺寸，比如width:750px

  • 然后要设置html标签里的文字大小：font-size

    在这里要先划分屏幕的份数，比如划分为15份（其它值也可以），再用屏幕尺寸除以份数，这里是 750/15=50px;

    那么这里html标签里的文字大小为：font-size:50px;

    那么整个页面中的元素尺寸有这样一个换算关系：1rem = 50px

  • 最后，在页面中的元素的单位都需要换算成rem单位的，其rem值 = 元素本身尺寸(px)/根标签字体大小，如：100x100px的图片尺寸就设置为：2x2rem；

五、关于媒体查询

01.媒体查询——media query

  • 媒体查询可以针对不同的屏幕尺寸设置不同的样式

02.怎么定义

  • 如何声明一个媒体查询？

    @media 媒体类型 关键字 媒体特性

    • 媒体类型：all | print | screen

    • 关键字：and | not | only

    • 媒体特性：width | max-width | min-width

      【注意】CSS中的 max-width 和 min-width 都包含 “等于”

    @media screen and (max-width: 800px) {body {background-color: #f00;}
}@media screen and (min-width: 801px) {body {background-color: #f0f;}
}p {font-size: 1rem;
}/*     以上样式：在屏幕上 并且 最大宽度是800px 时，设置一种样式最小宽度是801px时，改变为另一种样式
*/
/* 即，根据不同的屏幕尺寸，改变为不同的样式 */

03.如何引入资源

在link中引入

<link media="screen and (min-width:320px)" rel="stylesheet" href="123.css">

六、初识less语法

01.less简介

  • less：一门CSS扩展语言，也称为CSS预处理器，引入了变量、运算、函数等功能

02.less变量

  • 以@为前缀

  • 不能包含特殊字符

  • 不能数字开头

  • 区分大小写

  • 语法：

    @color:red;div {color:@color;
}

03.less编译

借助插件

04.less嵌套

  • 语法

    .father{width: 100px;height: 100px;background-color: red;.son {width: 50px;height: 50px;background-color: blue;}
}

  • 交集 | 伪类 | 伪元素选择器

    • 内层选择器的前面没有添加**&符号**，则会被解析为外层选择器的后代
    • 如果有**&符号**，则被解析为伪类
    .father{width: 100px;height: 100px;background-color: orange;&:hover{width: 200px;}
}

05.less运算

  • less中，任何数字、颜色、变量都可以参加运算，提供 加(+)、减(-)、乘(*)、除(/) 四则运算方式

  • 运算符左右两侧有空格

  • 两个不同单位的值运算，以第一个值的单位为主

  • 只有一个值有单位，以该单位为主

    div {width:100px - 2;height:(100px + 30) * 2;background-color: #666 - #333;
}

七、响应式布局

（未完待续~~~）

【CSS】关于CSS的几种移动端布局方式相关推荐

  1. 23-移动端布局方式-VM

    文章目录 移动端布局方式-VM 一.单位 二.结合移动端的公式进行推算:dpr=物理像素/逻辑像素 第一种情况:当设计图的大小是640px的时候 第二种情况:当设计图宽度是750px的时候[重点] 三 ...

  2. Java swing五种常见的布局方式【转载】

    Java swing五种常见的布局方式 1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5. ...

  3. 常见的几种页面内容布局方式

    在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页面的布局工作. 通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种: 第一种: 单列布局 ...

  4. 22-移动端布局方式-rem

    文章目录 移动端布局rem 一.移动端布局需要进行计算适配 二.关于dpr的推算 三.推算移动端布局公式 四.移动端布局单位 rem 五.关于移动端布局rem方式的总结 移动端布局rem 一.移动端布 ...

  5. 几种相册图片布局方式

    先上github地址:插件源码 百度前端在几个月前发布了一个针对前端技术培训的任务:IFE(百度前端技术学院).和几个小伙伴一起完成了部分任务,第四阶段是三个综合性的任务,博主先完成了其中的相册布局任 ...

  6. 前端页面几种常见的布局方式

    1.静态布局 2.弹性布局 3.自适应布局 4.流式布局 5.响应式布局 <meta http-equiv="X-UA-Compatible" content="I ...

  7. 常见的5种网站页面布局方式及特点分析

    互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页 ...

  8. 手机产品框架层设计: 两种主要的布局方式

    本文分析了在手机客户端产品中,多个功能模块的两种主要布局方式:按钮式布局和标签式布局.并以13款手机客户端为例,分析了两种布局方式的不同使用场景,它们的变体,以及优缺点. 手机产品设计与传统的桌面和w ...

  9. CSS中常见的几种高度自适应布局

    1.左右结构--高度自适应窗口高度 <!doctype html> <html> <head> <meta charset="utf-8" ...

最新文章

  1. 程序员，唯有锻炼与读书不能辜负
  2. 浅谈Java/Android下的注解
  3. PHP无限分类-PHP100代码篇
  4. Android中Uri的使用
  5. P2498 [SDOI2012]拯救小云公主
  6. 解决Mac安装软件的“已损坏，无法打开。 您应该将它移到废纸篓”问题
  7. LPC1788启动代码分析
  8. 通过tcpdump+wireshark来抓包分析TCP长连接和短连接的区别
  9. 彻底退出，刘强东转让所持京东股份；华为前三季研发费用超 1100 亿；腾讯会议部分功能开始收费 | EA周报...
  10. 第三方支付竞争走向下半场 汇付天下构建多方共赢新生态
  11. C++中按名次排序的两个实现方式
  12. Hadoop Steaming编程示例
  13. 计算机课学生当老师,当老师打开网课摄像头，本该端坐在电脑前的学生，竟变成了一只猫...
  14. 项目管理基础案例分析答案
  15. 三星android one 拍照功能,三星One UI 3.1体验：更好用了，也更注重隐私了
  16. 闵帆老师《论文写作》课学习心得
  17. C语言字符串类型定义(二维字符数组模拟连续存储多个字符串)(以小凡点名为例)
  18. 坦克大战java源码
  19. SSA麻雀算法-LSTM-优化神经网络神经元个数-dropout-batch_size
  20. mc服务器中怎样打开指令显示,mc服务器指令

热门文章

  1. 容器部署解决方案---Docker使用教程
  2. 核函数能写成两个高维映射乘积的充要条件
  3. js 定义布尔变量不能写成 boolean flag;
  4. 机器学习/深度学习答疑
  5. 计算机读不到u盘如何修复u盘,u盘读不出来怎么修复？你有没有尝试过这个办法...
  6. 时尚人生网，精品游戏站，觉得有你没见过的
  7. 一篇搞定SpringCloud面试（两万字）
  8. linux下usb 抓包方法和数据分析
  9. excel html java_将excel嵌入html
  10. Mac 系统占用100G+解决办法（详细步骤