css常见的页面布局

简介: css常见的页面布局

1、常见布局

固定布局:

以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸:

可切换的固定布局

同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布

局;

弹性布局:

以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果

混合布局:

同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果,只是混合像素、和百分比

两种单位作为页面单位。

布局响应:

对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:pc优先(从pc端开始向下设计)

移动优先(从移动端向上设计),口无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生

布局改变的临界点称之为断点)

2、响应式布局方案

3、响应式布局特点

设计特点:

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点:

-tcme-tt+ee-e te

黄突久种冬工作昌1

就察低下

代码累罄,会出现隐藏无用的元素,加载时间加长

其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

定程度上改变了网站原有的布局结构,会出现用户混淆的情况


响应式布局实现方法--媒体查询

————————————————

版权声明:本文为CSDN博主「秃头请走开」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/cc2231293148/article/details/133324842

相关文章
|
3月前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
3月前
|
前端开发
CSS清除浮动:让页面布局更上一层楼
CSS清除浮动:让页面布局更上一层楼
|
前端开发
Css3的页面布局之定位
Css3的页面布局之定位
62 0
|
前端开发
20个不错的CSS页面布局相关资源推荐
译文出自:开源中国社区
506 0
|
前端开发 数据安全/隐私保护
|
前端开发 JavaScript Shell
|
Web App开发 前端开发 JavaScript
CSS补充之--页面布局、js补充,dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) 这里的内容会自动居中 这样是把网站分为了上中下三部分,最上面是头部,中间是主要内容,下面是底部的信息 后台管理...
884 0
|
6天前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
26 4
|
1月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
79 0
|
4天前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集