文章目录 标准的viewport设置移动端技术选型1.移动开发-流式布局2.移动开发-flex布局3.移动开发-rem适配布局rem基础rem单位rem的优点如何根据屏幕大小动态修改html中文字大小媒体查询语法规范引入资源动态设置html标签的font-size大小计算rem公式 rem适配技术方案设置公共common.less文件在index.less中导入common.less文件rem适配方案flexible.js 4.移动开发-响应式布局响应式开发原理响应式布局容器bootstrap

标准的viewport设置 视口宽度和设备保持一致视口的默认缩放比例1.0不允许用户自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 移动端技术选型

1.单独制作移动端页面

流式布局（百分比布局）flex弹性布局less+rem+媒体查询布局混合布局

2.响应式页面兼容移动端

媒体查询bootstrap 1.移动开发-流式布局

百分比布局

盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩 2.移动开发-flex布局 flex-wrap：flex的项目默认在一条轴线上，不会换行，如果一行放不下，就会缩小项目宽度（就算设置了子元素宽度也没用）flex：定义子项目分配剩余空间，用flex表示占多少份数 align-self：控制子项目自己在垂直方向上的对齐方式，可覆盖align-items属性order：定义子项目的排列顺序，数值越小，排列越靠前，默认为0

(这里不作过多赘述，只记录一些自己不太熟的属性)

3.移动开发-rem适配布局

页面布局能否随屏幕大小变化而变化？ 流式布局和flex布局主要针对于宽度布局，那么高度如何设置？ 怎么样让屏幕发生变化时元素高度和宽度等比例缩放？

rem基础 rem单位

rem是一个相对单位，类似于em，em是父元素字体大小(父元素设置font-size=12px;，子元素设置width:2rem;，则换成px表示就是24px)

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

比如，根元素(html)设置font-size=12px;，非根元素设置width:2rem;，则换成px表示就是24px

rem的优点

可以通过修改html的文字大小来改变页面中元素的大小

如何根据屏幕大小动态修改html中文字大小 媒体查询

Media Query

使用 @media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同屏幕尺寸设置不同的样式 语法规范 @media mediaType and|not|only (media feature) { css code; }

mediaType代表设备类型，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度(必须放在小括号里)

mediaType 媒体类型 值： all 用于所有设备print 用于打印机和打印预览screen 用于电脑屏幕、平板电脑、智能手机 关键字 and：可以将多个媒体特性连接到一起，相当于“且”的意思not：排除某个媒体类型，相当于“非“的意思，可以省略only：指定某个特定的媒体类型，可以省略

！书写顺序宽度从小到大更好

引入资源

当样式比较多的时候，我们可以不同的媒体使用不同的样式表。 直接在link标签中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" href="./style320.css" media="screen and (min-width: 320px)"> <link rel="stylesheet" href="./style640.css" media="screen and (min-width: 640px)"> 动态设置html标签的font-size大小

我们把屏幕的尺寸划分为相等的份数，例如现在屏幕尺寸为750px，划分份数我们定为15等份，那么html标签的font-size大小就设置成50px，如果屏幕尺寸是320px，那么html标签的font-size大小就设置成21.33px

计算rem公式

rem = 页面元素的px / html字体大小，注意最后单位会取第一个单位 例如：height: (88rem / 50);所以这里单位写rem

rem适配技术方案 技术方案1 less媒体查询rem 采取单独制作移动页面方案，以750px设计尺寸为例： 设置公共common.less文件

在公共common.less文件中设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小 划分份数定为15等份

在index.less中导入common.less文件

@import "common" （@import导入 把一个样式文件导入到另一个样式文件里） （link 把一个样式文件引入到html页面里面）

技术方案2 flexible.jsrem rem适配方案flexible.js

它的原理是将当前设备划分为10等份，我们只需要确定好当前设备的html文字大小就可以 比如设计稿时750px，那么我们只需要把html文字大小设置为75px就可以

4.移动开发-响应式布局 响应式开发原理

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

设备划分 尺寸区间

超小屏幕(手机) < 768px

小屏设备(平板) >=768px ~ <992px

中等屏幕(桌面显示器) >=992px ~ <1200px

宽屏设备(大桌面显示器) >=1200px

响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素实现变化效果 原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

常见的响应式尺寸划分： 超小屏幕(手机，小于768px)：设置宽度为100%

小屏幕(平板，大于等于768px)：设置宽度为750px

中等屏幕(桌面显示器，大于等于992px)：设置宽度为970px

大屏幕(大桌面显示器，大于等于1200px)：设置宽度为1170px

针对各个尺寸划分了不同的css文件，在common.css中引入，然后在各文件中分别修改具体样式

bootstrap

bootstrap帮我们将布局容器写好了，我们并不再需要去书写媒体查询代码来改变布局容器的宽度

在不同设备下，需要改变布局容器里的内容时再用媒体查询即可

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。