web网页 页面布局的几种方式
来源:互联网 发布:php可以写后端吗 编辑:程序博客网 时间:2024/04/28 12:01
网页基本布局方式:
(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媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。
阅读全文
1 0
- web网页 页面布局的几种方式
- 常见的几种页面布局方式
- 常见的几种页面内容布局方式
- web前端页面取值的几种方式
- web前端页面取值的几种方式
- web页面跳转几种方式详解
- Web页面布局方式小结
- Web页面布局方式小结
- 网页布局五之json方式的页面链接
- 几种常见的网页布局形式
- 网页的布局方式
- 几种布局方式
- 几种布局方式
- view的几种布局方式
- 固定布局的几种方式
- 三列布局的几种方式
- 两列布局的几种方式
- 居中布局的几种方式
- Android7.0中文文档(API)--- BaseExpandableListAdapter
- IOS进程间通信
- Swift3之细致理解Optional(可选类型)
- 解决android studio3.0 preview一直卡在Gradle:Resolve dependencies':classpath'的问题
- DDoS攻击与CC攻击的区别
- web网页 页面布局的几种方式
- Json的简单介绍
- Nodejs学习(二)http服务程序
- jquery设置点击标签,标签滚动到页面顶部
- 科三 二十里铺(带视频)
- 初识汇编语言
- HDU 2094 产生冠军
- Android小Bug TabLayout + ViewPager +.. 滑动不流畅问题
- CAN总线与RS485的比较