CSS-响应式布局
原创
原文链接：https://note.noxussj.top/?source=cloudtencent
什么是响应式布局？
在不同屏幕分辨率下，能够以最佳的方式进行展示，元素的宽度尺寸以及展示方式可能会改变。通常使用 @media 多媒体查询来实现响应式布局。
优点
页面能够兼容不同分辨率的屏幕。
缺点
工作量大，UI 需要设计多个平台的版本。
场景
一套代码兼容 web 端、平板、以及手机端网页
基础案例
以下简单模拟一个响应式布局，在不同设备/分辨率下实现不同的展示效果。
容器尺寸 640px * 320px
当分辨率较大时可采用一行多个元素的形式。
容器尺寸 150px * 320px
当分辨率过小时采用一行一个元素的形式。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。