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

相关文章
|
7月前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
7月前
|
前端开发
CSS清除浮动:让页面布局更上一层楼
CSS清除浮动:让页面布局更上一层楼
|
前端开发
Css3的页面布局之定位
Css3的页面布局之定位
76 0
|
前端开发
20个不错的CSS页面布局相关资源推荐
译文出自:开源中国社区
513 0
|
前端开发 数据安全/隐私保护
|
前端开发 JavaScript Shell
|
Web App开发 前端开发 JavaScript
CSS补充之--页面布局、js补充,dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) 这里的内容会自动居中 这样是把网站分为了上中下三部分,最上面是头部,中间是主要内容,下面是底部的信息 后台管理...
897 0
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)