pc端布局方式

一曲冷凌霜 提交于 2020-03-27 15:34:19

1.静态布局:

      布局特点:宽高固定

 

2.自适应布局

       布局特点:不同分辨率下,页面元素位置变化,大小不变

    实现方法:针对不同分辨率创建对应的样式表,使用 @media 媒体查询给不同尺寸的设备切换不同的样式

    缺点:IE8及以下不支持媒体查询;只能兼容主流分辨率

 

3.流式布局(百分比布局):

    布局特点:不同的分辨率下显示相同的排版;高度固定,宽度自适应

    实现方法:网页中主要区域的尺寸使用百分比;

    缺点:大屏幕上元素被拉长,但是文字,高度还是固定大小,不协调

    经典流式布局:左侧固定,右侧自适应;两侧固定,中间自适应

 

4.弹性布局(rem/em布局)

    布局特点:页面元素宽度,高度,字体大小会跟着屏幕大小缩放

    实现方法:使用js监听当前屏幕大小,设置html的字体大小

    缺点:IE678不兼容;需要计算;

 

5.响应式布局

    布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变,响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表等等)都能显示出令人满意的效果

    实现方法:媒体查询+流式布局

    优点:适应pc和移动端

    缺点:要匹配足够多的屏幕大小,工作量大,设计也需要多个版本

 

6.响应式布局和流式布局的区别
   响应式是用于解决不用设备之间不同分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)
 
   流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少),但由于未针对不同屏幕做区分,效果在部分屏幕上可能不好。

7.响应式和弹性布的区别:

  响应式布局:改变浏览器宽度,布局会随之变化,不是一成不变的(例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单)也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果

 

  rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

 

8.常用布局单位

  vw,vh:

    相对于视口;PC端指的是浏览器的可视区域;

    1vw等于视口宽度的1%,1vh等于视口宽度的1%(1920*1080的屏幕,1vw = 19.2px,1vh = 10.8px)

    IE8以及IE8以下不兼容

  rem:

    相对于根元素html字体大小;谷歌浏览器默认字体大小是16px;

    IE678不兼容

  em:

    相对于父元素的字体大小;默认1em=16px;

    参照物不稳定

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!