zoukankan      html  css  js  c++  java
  • web网页 页面布局的几种方式(转)

    web网页 页面布局的几种方式

    转载 2017年06月16日 12:19:40

    网页基本布局方式:

    (1)流式布局 Fluid

    流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。换句话说,通过设置百分比,我们不需要考虑设备尺寸或者屏幕宽度大小了,可以为每种情形找到一种可行的方案,应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。

    (2)固定布局 Fixed

    在固定布局中,网页的宽度是必须指定为一个像素值,一般为960px。过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12和15。在今天,在web开发中还是比较普遍使用固定宽度布局的,因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势,固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。

    (3)弹性布局 Elastic

    弹性布局跟流布局很像,主要不同是大小单位。弹性布局的大小单位不是像素或者百分比,而是em或者rem,避免了根据px局部在高分辨率下几乎无法辨识的缺点,又相对于%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,需要一段时间适应而且不易从其他布局转换过来。

    (4)伸缩 Flex box

    使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大,但是存在兼容性问题。

    (5)响应式

    使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。

  • 相关阅读:
    ASP.Net控件基础篇
    ASP.Net
    有关于静态
    重载
    继承和多态
    面向对象的封装
    .net webform 把word转为html
    lambda 表达式 比较时间大小
    js 根据名字获取cookie 的方法
    .net 常用的命名空间和类
  • 原文地址:https://www.cnblogs.com/lianghong/p/8135421.html
Copyright © 2011-2022 走看看