移动Web的开发方式分为流式布局（即百分比布局）、伸缩布局和响应式布局。

（一）多倍图

设计多倍图，根据不同手机的物理像素比来选择不同大小的图片使用，图片才会恒清晰。

常用设备的物理像素比

更多请戳 =>  https://material.io/devices/ ，一个设备尺寸统计网站。

---

（二）视口

分为布局视口、视觉视口和理想视口。

理想视口

如果把视口宽度写死，在移动设备上就会出现布局混乱。因为没有考虑到移动屏幕的大小。所以宽度不能写死，要和设备的宽度一致。步骤如下：

        1）设置宽度 width: 100%;

        2）设置网页的视口及其他相关配置。（即meta标签配置）

1.视口宽度与设备宽度要一致（设置百分比）。

width: 100%;

2.网页内容不能出现缩放（配置meta标签）。

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

width=device-width, initial-scale=1.0，意为视口宽度与设备宽度一致。

maximum-scale=1.0,user-scalable=0，意为最大缩放是1,禁止用户缩放。

（三）其他属性

1.最大宽度、最小宽度

最大宽度max-width，和最小宽度min-width。（高度很少用，此处忽略）

代码举栗：

max-width: 700px;  /* 设置当前元素最大宽度是多少像素 <= 700 */

min-width: 700px;   /* 设置当前元素最小宽度是多少像素    >= 700 */

2.超出部分省略号表示

/* 设置超出部分的显示方式，首先用这行代码 */

overflow: hidden;

/* 在文字末尾换行 */

word-break: break-all;

/* 文字溢出显示省略号 */

text-overflow: ellipsis;

其他的：

/* 用来控制显示行数 */

-webkit-line-clamp: 2;

/* 文字显示方式,默认水平 */

-webkit-box-orient: vertical;

/* 将盒子转为弹性盒子 */

display: -webkit-box;