CSS布局方式-响应式布局

菜园前端
• 阅读 415

原文链接:https://note.noxussj.top/?source=helloworld


什么是响应式布局?

在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用 @media 多媒体查询来实现响应式布局。

优点

页面能够兼容不同分辨率的屏幕。

缺点

工作量大,UI 需要设计多个平台的版本。

场景

一套代码兼容 web 端、平板、以及手机端网页

基础案例

以下简单模拟一个响应式布局,在不同设备/分辨率下实现不同的展示效果。

容器尺寸 640px * 320px

CSS布局方式-响应式布局

当分辨率较大时可采用一行多个元素的形式。

容器尺寸 150px * 320px

CSS布局方式-响应式布局

当分辨率过小时采用一行一个元素的形式。

点赞
收藏
评论区
推荐文章
御弟哥哥 御弟哥哥
3年前
Android Fragment生命周期
Fragment是在Android3.0中引入,用于解决不同屏幕分辨率的设备上UI显示、交互的问题。Fragment有自己的布局,有自己的生命周期,有自己的事件响应。但Fragment又是依赖于Activity存在的,你可以把多个Fragment嵌入到一个Activity中或者多个Activity重用一个Fragmen
菜园前端 菜园前端
1年前
CSS布局方式-自适应布局
原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工
Jacquelyn38 Jacquelyn38
3年前
从0到1搭建一款页面自适应组件(Vue.js)
组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。建议在组件内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0,否则会引起计算误差。fullScreenContainer.vue<template<divid"fullscreencontainer":ref"ref
菜园前端 菜园前端
1年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
Wesley13 Wesley13
3年前
2020 全球 CSS 报告,大家都在用什么样的技术?
本文来源与公众号「秋风的笔记」介绍CSS从1994年10月首次被提出,到目前为止已经20余年,但是CSS早已发生了天翻地覆的变化,2020的CSS 又是如何的呢?我们现在可以使用CSSGrid轻松制作动态或响应式的布局,以更少的代码来进行自适应布局。CSSinJS无需依赖全局样式表,我们可以将样式与组件写在一起
Wesley13 Wesley13
3年前
HTML CSS布局定位
HTMLCSS布局定位我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容。网页布局的好与坏,直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中,我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用,以达到预期效果
Stella981 Stella981
3年前
HTML前端开发之路——弹性盒模型
弹性盒模型(FlexibleBox)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序;弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局;下面是弹性盒模型的元素基本概念:!(http://static.oschina.net/uploads/space/2016/0212/210
Stella981 Stella981
3年前
Kendo UI常用示例汇总(十九)
通过70多个可自定义的UI组件,KendoUIProfessional可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,KendoUIProfessional将开发时间加快了50%。KendoUIProfessional目前最新提供KendoUIforjQuery(h
linbojue linbojue
7个月前
选择前端还是.NET开发Web应用?如何做出明智的选择
前端开发前端开发主要涉及构建用户界面、实现交互和用户体验。以下是前端开发的特点和优势:响应式用户界面:前端技术(如HTML、CSS和JavaScript)可以创建跨平台、响应式的用户界面,适应不同设备和屏幕尺寸。丰富的库和框架:前端生态系统拥有众多成熟的库