知识百科 2022-10-10 12:59 作者:环球小二    浏览:316    

一、静态数据布局

设计方案:

布局元素垂直居中布局,设定width固定不动总宽。

二、流式的布局

设计方案:

布局元素总宽应用百分数从而使用min-width或max-width限制,相对高度使用vw从而使用min-height或max-height限定使布局元素宽高比一致。

具体内容元素应用百分数。

使总体布局一致。流式的布局代表:栅格系统。

三、响应式布局

设计方案:

应用媒体查询在各个中断点可用不一样静态数据布局。

四、响应式网站布局

设计方案:

响应式和流式的布局的融合,响应式网站布局的代表:bootstrap。

五、弹力布局和rem/em布局

设计方案:

弹力布局使用flex。

rem/em布局使用rem调整各元素尺寸大小字体大小,之上以750的设计图,1rem = 100px,适用挪动端网页页面。

汇总:

对需要手机端和pc端网站,能使用window.navigator.userAgent,分辨浏览服务平台,自动跳转挪动端网站或pc端的网站。

 
打赏