移动端布局

rem

1.rem基础

rem单位

rem是一个相对单位，类似于em,em是父元素字体大小

不同的是rem是相对于html元素的字体大小

1.em相对于父元素的字体大小来说的

2.rem相对于html元素字体大小来说的

3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

2.媒体查询 Media Query

​ 可以针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature){

css-Code；

}

mediatype 查询类型

​ all 所有设备

​ print 用于打印机和打印预览

​ scree 用于电脑屏幕、平板电脑、智能手机等

关键字

​ and|not|only

media feature 媒体特性

​ width、min-width、max-width

1.媒体查询一般按照从大到小或者从小打大的顺序来

2.screen还有and、px必须带上不能省略

3.媒体查询+rem实现元素动态大小变化

@media screen and (min-width:320px)

Less基础

• less是一门css预处理语言，它扩展了css的动态特性。

• less变量 @变量名：值；

​ PS:变量名区分大小写，不以数字开头

• less编译 vocode Less插件

• less嵌套

​ 1.less嵌套，子元素的样式直接写到父元素里面就好了

​ 2.如果有伪类、交集选择器、伪元素选择器，我们内层选择器

​ 的前面需要加&

​ 3.less嵌套写法

a{
	&:hover{
		color:red;
	}}

• less运算

​ 1.我们运算符的左右两侧必须敲一个空格隔开；

​ 2.两个数参与运算，如果只有一个数有单位，则最后的结果就以 这个单位为准；

​ 3.两个数参与运算，如果两个数都有单位，而且不一样的单位, 最后的结果以第一个单位在为准

rem适配方案

一、适配的目标：

​ 1.让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备

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

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

技术方案1

less、媒体查询、rem

技术方案2(推荐)

flexible.js rem

1.设计稿中常见尺度宽度（现在基本以750px为准）

设备	常见宽度
iphone4.5	640px
iphone x	750px
Android	4.7~5 720px

2.动态设置html标签font-size大小

元素的大小取值方法：

①最后的公式：页面元素的rem值 = 页面元素值（px）/（屏幕宽度/划分的份数）

②屏幕宽度/划分的份数 就是html font-size的大小

③页面元素的rem值=页面元素值（px）/html font-size字体的大小

3.适配方案2

高效简洁的移动端适配库

利用js(flexible.js)去算

默认将设备划分为10等份

px转换rem 插件 cssrem 默认字体大小为16px

Bootstrap

响应式开发

1.响应式开发原理

就是使用媒体查询针对不同宽度的设备经行布局和样式的设置，从而设配不同设备的目的

设备划分	尺寸区间	设置宽度
超小屏幕（手机）	<768px	100%
小屏设备（平板）	[768px,992px)	750px
中等屏幕（桌面显示器）	[992px,1200px)	970px
宽屏设备（大桌面显示器）	>1200px	1170px

2.响应式布局容器

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

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

Bootstrap前端开发框架

Bootstrap是基于HTML、css和JavaScript的，简洁灵活

1.优点

标准化的html+css编码规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈、不断的更新迭代

让开发更简单，提高了开发的效率

2.使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

Bootstrap使用四步曲：1.创建文件夹结构2.创建html骨架结构3.引入相关样式文件
4.书写内容：

直接拿Bootstrap预先定义好的样式来使用

修改Bootstrap原来的样式，注意权重问题

学好Bootstrap的关键在于它定义了哪些样式，以及这些样式能实现什么样的效果

3.布局容器

​ 1.container类

​ 响应式布局的容器 固定的宽度 适配各种屏幕

​ 2.container-fluid类

​ 流式布局容器 百分百宽度

​ 占据全部视口的容器

​ 适合于单独做移动端开发

Bootstrap栅格系统

1.定义

栅格系统指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局，系统自动分为最多12列

container的宽度是固定的，但在不同屏幕下，container的宽度不同，我们把container划分为12等份

PS:一定不要忘记引入bootstrap的样式文件!!!

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >

2.栅格系统参数

栅格系统用于一系列的行与列的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

	手机<768px	平板>=768px	桌面显示屏>=992px	大桌面显示屏>=1200px
.container最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(column)数	12	12	12	12

3.列嵌套

栅格系统内置的栅格系统将内容再次嵌套。我们通过添加一个新的.row元素和一系列.col-sm- * 元素到已经存在的.col-sm-* 元素内

<!-- 列嵌套 -->
<div class="col-md-4">
	<div class="row">
		<div class="col-md-6">小列</div>
		<div class="col-md-6">小列</div>
	</div>
</div>

PS:快捷键提示：（写代码的时候就想偷个懒，去搜了一下，然后总结）

①变量重命名 F2

②按住**alt，**用鼠标左键点击，可以出现多个光标，输入的代码可以在光标处同时增加

③按住Ctrl + Alt，再按键盘上向上或者向下的键，可以使一列上出现多个光标

④选中一段文字，按shift+alt+i，可以在每行末尾出现光标

⑤光标放在一个地方，按ctrl+shift+L或者ctrl+f2，可以在页面中出现这个词的不同地方都出现光标，可以同时修改相同的变量

⑥任何光标操作，可以按Ctrl + U取消

⑦替换字符串 ctrl +f 按三角可出现替换框，右边可逐一替换或全部替换

4.列偏移

使用.col-md-offset-* 类可以将列向右偏移。通过使用* 选择器为当前元素增加了左侧的边距(margin)

<!-- 列偏移 -->
<!-- 偏移的份数 = 12 - 两份盒子的份数 =  (12 - 一份盒子的份数)/2 -->
<div class="row">
	<div class="col-lg-3">1</div>
	<div class="col-lg3 col-lg-6">2</div>
</div>

5.列排序

通过使用.col-md-push-* 和 .col-md-pull-* 类就可以很容易改变列的顺序

<!-- 列排序 -->
<!-- 左右交换顺序，左推右拉 -->
<div class="row">
	<div class="col-lg-4 col-lg-push-8">左侧</div>
    <div class="col-lg-8 col-lg-pull-4">右侧</div>
 </div>

6.响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是visible-xs visible-sm visible-md visible-lg 是显示某个页面内容

移动端布局总结

流式布局（百分比布局）

flex弹性布局（推荐）

rem适配布局（推荐）

响应式布局

建议：选取一种主要技术类型，其他技术作为辅助，这种混合技术开发