网页样式编写注意事项

首先使用chrome 手机模拟器上测试布局。

不同真机测试布局问题！！手机模拟器上没有的问题，真机上可能会出问题！

获取手机的浏览器的高度。
window.screen.height

常用的移动端HTML　布局单位

vh: 　等于1% 当前视窗的 ICB ( initial containing block,网页根元素所在的长方形的包含块)的高度。
vw: 　等于1%当前视窗的ICB的宽度。
rem: 表示网页根元素（一般是html）的font-size。一般情况下，浏览器都是等于16px，用户可以自定义，我就常定义为100px。　
这３个单位可以帮助我们将网页各个元素适配不同手机的屏幕大小。
calc(100vh - 2.16rem); 　使用calc可以对方面的让某个元素充满特定的屏幕区域。

响应式布局方式。

flex : 可以简便、完整、响应式地实现各种页面布局.