移动端开发之常见布局

最新推荐文章于 2024-03-11 17:02:12 发布

我和夏天来了

最新推荐文章于 2024-03-11 17:02:12 发布

阅读量343

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_42306249/article/details/115523097

版权

流式布局（百分比布局）

流失布局，就是百分比布局，也称非固定像素布局
通过将盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
制作过程中，需要定义页面的最大和最小支持宽度
- max-width 最大宽度（ max-height 最大高度）
- min-width 最小宽度（ min-height 最小高度）

flex布局

弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，简称“容器”。它的所以子元素自动成为容器成员，称为flex项目，简称“项目”。
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排序方式
特点
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差，IE11或更低版本不支持或仅部分支持

常见属性

父项

flex-direction:设置主轴的方向
justify-content:设置主轴的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式（多行）
align-items:设置侧轴上的子元素的排列方式（单行）

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

		.box{
			display:flex;
			 flex-direction: row;  /* 默认值从左到右*/
			 flex-direction: row-reverse;  /* 从右到左*/
			 flex-direction: column;  /*从上到下*/
			 flex-direction: column-reverse;  /* 从下到上*/
		  
			  justify-content: flex-start;  /* 默认值 从头部开始右*/
			  justify-content: flex-end; /* 从尾部开始*/
			  justify-content: center; /*在主轴居中对齐*/
			  justify-content: space-around;  /*平分剩余空间*/
			  justify-content: space-between;  /*先两边贴边 再平分剩余空间*/
				flex-wrap:nowrap;  /*默认值，不换行*/
				flex-wrap:wrap;  /*换行*/
			
				align-items:flex-start;  /*默认值 从上到下*/
				align-items:flex-end;  /*从下到上*/
				align-items:center;  /*挤在一起居中（垂直居中）*/
				align-items:streth;   /*拉伸*/

				align-content:flex-start;  /*从侧轴的头部开始排列*/
				align-content:flex-end;  /*从侧轴的尾部开始排列*/
				align-content:center;  /*在侧轴中间显示*/
				lign-content:space-around;  /*子项在侧轴平分剩余空间*/
				lign-content:space=between;  /*子项在侧轴先分布在两头，再平分剩余空间*/
				align-content:streth;   /*设置子项元素高度平分父元素高度*/
				
				flex-flow:row nowrap;  /*复合属性*/
		}
		  
	```

子项
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式(默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch)
- order属性定义子项的排列顺序（前后顺序,数值越小，排列越靠前，默认为0，和z-index不一样）
```
	.item{
		flex:1;  /*default 0*/ 
	}
	span:nth-child(2){
		align-self:flex-end;  
	}
	.item:nth-child(2){
		order:-1;
	}
```

less+rem+媒体查询

rem

rem(root em) 是一个相对单位，类似与em，em是父元素字体大小
rem 基准是相对于<html>元素的字体大小。比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;转换成px表示就是24px;
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好的来控制整个页面的元素大小比例

媒体查询

简介 – css新语法
- 使用@media查询，可以针对不同的俄媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用的到多媒体查询
语法规范
- 用@media开头注意@符号
- mediatype 媒体类型
- 关键字 and|not|only
- media feature 媒体特征必须有小括号包含
```
@media mediatype and|not|or|only (media feature) { }
```
- mediatype媒体类型，all-用于所有设备，print-用于打印机和打印预览，screen-用于电脑屏幕，平板电脑，智能手机等

实现

/* 1.屏幕小于等于539px 时，背景为蓝色 */
@media screen and (max-width: 539px) {
  body {
    background-color: blue;
  }
}
/* 2.屏幕大于等于540px 并且 小于等于 969px 时，背景为绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
  body {
    background-color: green;
  }
} */
@media screen and (min-width: 540px) {
  body {
    background-color: green;
  }
}
/* 3.屏幕大于等于 970px 时，背景为红色 */
@media screen and (min-width: 970px) {
  body {
    background-color: red;
  }
}

为防止混乱媒体查询按照从小到大或从大到小的顺序来写，一般建议从小到大来写，这样代码更加简洁

媒体查询+rem

rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem可以实现不同设备宽度，实现页面元素大小的动态变化

引入资源

当样式比较繁多的时候，针对不同的媒体使用不同stylesheets（样式表）

原理就是直接在<link>中判断设备的尺寸，然后引用不同的css文件

/* 语法规范 */
<link rel="stylesheet" href="style.css" media="mediatype and|not|only (media feature)">
/* 示例 */
<link rel="stylesheet" href="style.css" media="screen and (min-width:400px)">

Less

简介
- Less(Leaner Style Sheets缩写)是一门css扩展语言，也称为css预处理器
- 在csss的语法基础上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本。
- 中文地址http://lesscss.cn/
- 常见css预处理器：Sass、Less、Stylus
- Less是一门css预处理语言，它扩展了css的动态特性
安装
- 1.安装nodejs,https://nodejs.org/en/download/
- 使用cmd命令，"node -v"查看版本
- 使用cmd命令，“npm install -g less”
- 使用cmd命令，"lessc -v"查看版本
使用
- Less变量
  - 命名规范
    - 必须有@为前缀
    - 不能包换特殊字符
    - 不能以数字开头
    - 大小写敏感
```
@color:pink;
body{
	color:@color;
}
```
- Less编译
  - 使用cmd命令，“lessc style.css > style.css”
  - VScode插件 Easy LESS
- Less嵌套
```
	#header{
		.logo{
			a{
				&:hover{}
			}
		}
	}
```
  - 如果遇见交集|伪类|伪元素选择器前加&，否则会倍解析为父选择器的后代
- Less运算
  - 任何数字、颜色或者变量都可以参与运算。Less提供了加减乘除算术运算
  - 对于两个不同单位的值之间的运算，运算结果取第一个值的单位
  - 如果两个值之间只有一个值有单位，则运算结果就取该单位
  - 运算符中件左右有空格格隔开1px + 5rem
  - 变量相除时，需添加括号（375rem / 50px）
```
@width: 10px +5;
div{
	border:@width solid red;
}
div{
	width: (@width + 5) * 2;
}
div{
	width:（375rem / 50px）;
	color:#999 - #333;
}
```

rem 适配方案

思考
- 适配目标
  - 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例设配当前设备
- 怎么去达到这个目标
  - 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
rem实际开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
- css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

rem适配方案技术使用（市场主流）

less+媒体查询+rem

动态设置htm标签font-size大小

//假设设计稿是750px
//假设我们吧整个屏幕划分为15等份（划分标准不一，可以是20或10）
//每一份作为html字体大小，这里就是50px
@no: 15; //定义份数

html{
    font-size: 50px; //默认，因为pc端也可打开
}

//320px 
@media screen and (min-width: 320px){
    html {
        font-size: (320px / @no);
      }
}

// 360px
@media screen and (min-width: 360px) {
    html {
      font-size: (360px / @no);
    }
  }
  
  // 375px,Iphone 678 的开发尺寸
  @media screen and (min-width: 375px) {
    html {
      font-size: (375px / @no);
    }
  }
  
  // 384px
  @media screen and (min-width: 384px) {
    html {
        font-size: (384px / @no);
    }
  }
  
  // 400px
  @media screen and (min-width: 400px) {
    html {
        font-size: (400px / @no);
    }
  }
  
  // 414px
  @media screen and (min-width: 414px) {
    html {
        font-size: (414px / @no);
    }
  }
  
  // 424px
  @media screen and (min-width: 424px) {
    html {
        font-size: (424px / @no);
    }
  }
  
  // 480px
  @media screen and (min-width: 480px) {
    html {
        font-size: (480px / @no);
    }
  }
  
  // 540px
  @media screen and (min-width: 540px) {
    html {
        font-size: (540px / @no);
    }
  }
  // 720px
  @media screen and (min-width: 720px) {
    html {
        font-size: (720px / @no);
    }
  }
  
  // 750px
  @media screen and (min-width: 750px) {
    html {
        font-size: (750px / @no);
    }
  }

元素大小取值方法

页面元素的rem值=页面元素值（px）/ (屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html font-size的大小

或者页面元素的rem值=页面元素值（px）/ html font-size的大小

			@import "common";  // 导入公共的 common.less 文件
			@baseFont: 50px;
			body{
			    min-width: 320px; 
			   width: 750rem / @baseFont;
			    line-height: 1.5;
			    font-family: Arial,Helvetica,STHeiTi,sans-serif;
			    background: #f2f2f2;
			}

flexible.js+rem (更简单)
- 手机淘宝团队出的简洁高效移动端适配库
- 原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的
- 需要做的就是确定好我们当前设备的html文字大小就可以了，比如当前的设计稿是750px，那么我们只需要把html字体大小设置为75px（750px / 10）就可以了
- 页面元素rem值：页面元素的px值 / 75
- github地址 https://github.com/amfe/lib-flexible
- VScode插件 cssrem 可以直接px 转换 rem（但是要设置cssrem 中的基准值） cssrem.rootFontSize:75

响应式布局

原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设配不同设备的目的。媒体查询+bootstrap
Bootstrap
- 来自Twitter(推特)
- 中文官网 https://www.bootcss.com/
- 官网 http://getbootstrap.com/
- 版本一般选择3.x.x 目前使用最多，放弃了IE6-7,对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动端设备优先的WEB项目

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> 
  <!--[if lt IE 9]>
  <!--解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题-->
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对css3 Media Query的不识别-->
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->

书写内容
- 直接拿BootStrap 预先定义好的样式来使用
- 修改BootStrap 原来的样式，注意权重问题
- 学好BootStrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
布局容器
- .container类：响应式布局的容器固定宽度
- .container-fluid类：流式布局容器百分百宽度
栅格系统
- 按照不同屏幕划分为1~12等份
- 行（.row）可以去除父容器作用15px的边距
- 列 .col-xs-* 超小 .col-sm-* 小 .col-md-* 中等 .col-lg-* 大
- 每一列默认有左右15像素的padding
- 列偏移 .col-md-offset-* 向右偏移
- 列排序 .col-md-push-* 往右推 .col-md-pull-* 往左拉
响应式工具
- .hidden-xs 隐藏当前屏（现在是超小屏）；
- .visiblie-xs 显示当前屏（现在是超小屏）；

-----------------------拓展--------------------------

二倍精灵图做法

把精灵图比例缩放为原来的一般
根据新的大小测量坐标
注意代码里background-size 也要写为精灵图原来宽度的一半

图片格式

DPG图片压缩技术	webp图片格式
京东自主研发，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能兼容jpeg，实现全平台、全部浏览器的兼容支持，与webp的清晰度对比没有差距	谷歌开发，加快图片加载速度的图片格式，压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间

我和夏天来了

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
移动端开发之常见布局

流式布局（百分比布局）流失布局，就是百分比布局，也称非固定像素布局通过将盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充制作过程中，需要定义页面的最大和最小支持宽度max-width 最大宽度（ max-height 最大高度）min-width 最小宽度（ min-height 最小高度）flex布局弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局后，子元素的float、cl
复制链接

扫一扫