欢迎访问智瑞科技官方网站,我们从事北京小程序开发北京网站制作北京网站建设北京网站设计北京网页设计全程服务。全国统一服务热线:400-030-2009     设为首页 | 加入收藏

智瑞科技

当前位置: 首页 > 最新资讯 > 常见问题 >
NEWS

常见的网站布局方式

随着移动互联网的发展和微信的突起,移动端的响应式布局越来越重要了。北京小程序开发目前网站布局有以下几种:
 
1.定宽度布局
 
很多pc的网站都是定宽度布局的,也就是设置了min-width,
 
这样一来,如果小于这个宽度就会出现滚动条,
 
如果大于这个宽度则内容居中外加背景,
 
这种设计常见与pc端。
 
2.响应式布局
 
所谓响应式布局就是流式布局+媒体查询,
 
流式布局用来解决不同宽度的布局问题,
 
外加媒体查询,可以调整布局,例如大屏幕是布局1,小屏幕是布局2,
 
这种布局通吃pc和移动端,做到精细处,两者的效果都很好,
 
缺点是媒体查询是有限的,也就是可以枚举出来的,
 
只能适应主流的宽高。
 
3.rem布局
 
原理是,先按定高宽设计出来页面,然后转换为rem单位,
 
配合js查询屏幕大小来改变html的font-size,
 
最终做出所谓的完美自适应。
 
响应式 VS rem
 
1.响应式
 
优点:适应pc和移动端,如果足够耐心,效果完美
 
缺点:要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本
 
2.rem+js
 
优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。
 
缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了。
 
总结
 
如果只做pc端那么定宽度是最好的选择如果做移动端,且设计对高度要求不高那么rem+js是最好的选择,一份css+一份js调节font-size搞定如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计


以上内容由智瑞科技组织编辑为您提供!如有侵权,通知后立刻删除,如果更多有关北京网站建设、北京网站设计、北京网站制作、北京微信营销、移动网站建设、营销型网站建设等互联网应用服务都可以联系我们!全国热线:400-030-2009!
 

NEWS 最新资讯 MORE
ssssss
有创意,更有心意!