移动web布局方法

继续更新移动端的一个布局，这也是经典中的经典，当初只知道个rem和vwvh适配，其实这里面还有很多的门道不只是一个适配这么简单

一.前置

1.背景缩放

我们都知道做移动端，给的图都是二倍图，你拿来用直接缩减一半，这样在手机上显示出来也会很清晰

那么我们背景图片怎么来进行缩放呢

推荐一个多倍图切图神奇 cutterman

background-size除了cover contain还可以输入px和百分比

原尺寸100px

二.移动开发

1.主流方案

• 单独制作页面

  

2.移动端解决方案

注意初始化的css文件可以直接下载normalize.css

特殊样式

3.布局方案

1.流式布局

也就是百分比布局，宽度百分比，高度固定

但是有个bug，就是这个布局如果屏幕缩减到一定宽度，可能会导致布局错乱

所以一般会搭配max-width或者min-width来使用

整个盒子小于等于992，大于等于768是正常自适应范围，超过这两个区间不再自适应就停到那个状态

项目：（京东）

• 由于下面的布局都是占满屏幕所以可以直接给body设置wid100% 但是限制一个范围，320是现在手机最小分辨率，max-width1000，参考京东手机端官网

  

• 这个部分用到了三栏布局因为中间是自适应的

  

  通过定位来做

  

  

• 注意二倍精灵图并不能想这样做

  

  因为这样后面的background-size是基于整张背景图的来

精灵图的二倍图应该把我们取到的坐标除以2，同时size应该为精灵图除以2的宽高

2.flex布局

• 这样一个导航解决思路 双重flex

  

  

  

• 如果要换背景图，或者就是统一写一个样式，后面有一些自己的单独样式可以这样来写

  这个点方便在只用写一个类名，而且类名都是不同的

  

  重点在选择器，用到属性选择器，而且类似于正则，表示以什么开头的属性

这是一个公共属性然后自己有自己的背景就可以单独去添加

3.rem+less+媒体查询适配

前面流式布局和flex布局不能让文字大小随着屏幕变化而变化，而且高度都是固定不能自适应

首先是媒体查询方案，就是通过媒体查询去设置不同宽度的fontsize大小

• 方案一：

  rem是可以自适应的所以做一套即可，剩下的屏幕会自己去适应

  

  

  首先我们需要写一个公共样式里面装我们对于各个屏幕设置的媒体查询

  

  该模式下区别于flex和百分比，可以直接将宽度设置为rem

  

  该布局方案只是涉及单位用到这些，但是布局还是要用到flex或者float

4.rem+flexible

现在就只需要按照设计稿做一份，剩下的屏幕适配媒体查询就不用写了

vscode插件cssrem，可以自动将px转化为rem，直接写px值即可

但是他默认的html字体大小为16px

要修改的话打开vscode设置，命令面板搜索settings.json

打开默认设置

搜索cssroot将其修改为你设计稿的html字体大小

做移动端，如果电脑查看用flexible去做适配会有问题，会超大，这个时候要限制它的大小要配合媒体查询来做

注意important

5.响应式布局（媒体查询）

6.响应式布局（bootstrap）

4.总结

先考虑是单独给移动端一个网址还是响应式一个网址既可以移动端又可以pc端

然后选择布局方式

完全可以选择一种，然后其他也可以用的混合开发