网页UI布局是前端开发中占比较多的部分，做完网页布局也就差不多完成了一半的工作。
本期视频，我们不再讨论基础的UI布局。
我们希望满足响应式布局，一份代码适配PC/平板/手机等多端设备，希望尽可能适配视窗/内容变化。
我们按以下顺序展开讨论
网页布局核心问题
视窗变化
内容变化
我们的解决方案
网页布局核心问题
我们先抛开一切解决方案，观察网页布局本身。
一个网页像是一个大盒子，上面整齐放着小盒子或零件，小盒子中又可以放小盒子或零件。
如果所有的零件和盒子尺寸都是固定的，网页布局将是较为简单的工作，基本上就是将UI设计图翻译为HTML语言，甚至很多UI设计工具都可以直接导出HTML文件。
但是，现实的前端开发工作并不是这么简单的事情，核心问题是，网页布局中的这些盒子和零件的尺寸是变化的。
尺寸变化的问题又分为视窗变化和内容变化，以下将分别讨论其解决方案。
视窗变化
首先是视窗变化。
整个网页的大盒子，也就是网页的视窗是变化的。
比如仅仅用作PC端的网页，最终运行的视窗尺寸也是有变化的，因为用户显示器的尺寸不是固定的，而且PC浏览器的窗口大小也可以随意调整。
如果一个网页仅用于PC端或者手机端，即使视窗尺寸有所浮动，网页的整体布局一般是不需要有太大变化的，一般只需要微调局部，让内容可以正常显示。
但是，如果一个网页需要同时适配手机/平板/PC等多端的话，则可能会引起整体网页布局的变化。
以我们的手册网页为例，PC网页是左目录右内容，手机网页是上目录下内容，且详细目录需要隐藏起来。
这里需要特别说明的是，手机/平板/PC多端适配的前提，是网页结构是类似的。
比如仅仅是换一下区域的位置，或者仅仅需要某几个区域建立分身做特殊适配。
若网页特别复杂，且PC/手机网页的设计风格完全不一致的话，则适配工作量会非常大，还不如独立分开PC/手机端网页。
针对视窗的变化，我们一般是根据视窗宽度调整CSS样式。
视窗的宽度我们推荐以下几个梯度，其中视窗宽度小于768px的话，一般为手机等移动设备。需要考虑是否重新调整网页整体布局。
这里有个点需要注意，移动设备一般是可以横向、纵向旋转的。
以IPhone为例，竖着的时候，视窗宽度为390px 横着的时候，视窗宽度为844px。
所以，768px这个移动设备分水岭并不是绝对的，需要根据具体项目的适配要求而定。
这里需要补充说明的是，屏幕分辨率尺寸和浏览器视窗尺寸并不是完全等效的。
根据系统设置，一般1-3个物理像素等于1个网页视窗像素，比如iPhone的横向分辨率为1170，其浏览器视窗宽度为390px。
如果网页需要在移动设备运行，HTML的head中需要添加meta标识，不然网页会自动缩小。
针对视窗变化，一般是在CSS设置中，通过@media筛选视窗宽度进行样式覆盖，在网页开发调试时，需要测试这些推荐梯度下网页是否正常。
以上就是我们目前比较推荐的UI布局方式，这种方式最为直观，更接近直觉中网页是一个表格的感觉。
这里强调一下，我们并非推荐网页布局仅使用Grid布局，而是推荐在全局或者大片区域的布局上使用Grid布局，小局部可能使用经典的flex、float等布局方式更为方便。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
