css基础知识十四:什么是响应式设计?响应式设计的基本原理是什么?如何做?

news2024/12/26 0:37:44

在这里插入图片描述
一、是什么

响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

描述响应式界面最著名的一句话就是“Content is like water”

大白话便是“如果将屏幕看作容器,那么内容就像水一样”

响应式网站常见特点:

  • 同时适配PC + 平板 + 手机等
  • 标签导航在接近手持终端设备时改变为经典的抽屉式导航
  • 网站的布局会根据视口来调整模块的大小和位置

在这里插入图片描述
二、实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport

<meta name=“viewport” content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下:

  • width=device-width: 是自适应手机屏幕的尺寸宽度
  • maximum-scale:是缩放比例的最大值
  • inital-scale:是缩放的初始化
  • user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下:

  • 媒体查询
  • 百分比
  • vw/vh
  • rem

媒体查询

CSS3中的增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表

使用@Media查询,可以针对不同的媒体类型定义不同的样式,如:

@media screen and (max-width: 1920px) { … }

当视口在375px - 600px之间,设置特定字体大小18px

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片

比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现

百分比

通过百分比单位 " % " 来实现响应式的效果

比如当浏览器的宽度或者高度发生变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果

height、width属性的百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素:

  • 子元素的top/left和bottom/right如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度/宽度
  • 子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
  • 子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
  • border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

可以看到每个属性都使用百分比,会照成布局的复杂度,所以不建议使用百分比来实现响应式

vw/vh

vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一

与百分比布局很相似,在以前文章提过与%的区别,这里就不再展开述说

rem

在以前也讲到,rem是相对于根元素html的font-size属性,默认情况下浏览器字体大小为16px,此时1rem = 16px

可以利用前面提到的媒体查询,针对不同设备分辨率改变font-size的值,如下:

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}

为了更准确监听设备可视窗口变化,我们可以在css之前插入script标签,内容如下:

//动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用,设置一次
init()
// 监听手机旋转的事件的时机,重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)

无论设备可视窗口如何变化,始终设置rem为width的1/10,实现了百分比布局

除此之外,我们还可以利用主流UI框架,如:element ui、antd提供的栅格布局实现响应式

小结

响应式设计实现通常会从以下几方面思考:

  • 弹性盒子(包括图片、表格、视频)和媒体查询等技术
  • 使用百分比布局创建流式布局的弹性UI,同时使用媒体查询限制元素的尺寸和内容变更范围
  • 使用相对单位使得内容自适应调节
  • 选择断点,针对不同断点实现不同布局和内容展示

三、总结

响应式布局优点可以看到:

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点:

  • 仅适用布局、信息、框架并不复杂的部门类型网站
  • 兼容各种设备工作量大,效率低下
  • 代码累赘,会出现隐藏无用的元素,加载时间加长
  • 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/704923.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AD20|原理图导入Pcb时三极管引脚报错 Unkown Pin:Pin Q1-B

完成原理图绘制后&#xff0c;将其导入到Pcb中进行布局时&#xff0c;出现报错;Unknown Pin: Pin Q1-B. 原因是&#xff1a;引脚名称不一致 在原理图中&#xff0c;三个引脚分别定义B、C、E&#xff1b; 而在常见的TO—92A封装中&#xff0c;使用1、2、3作为三个引脚的名称&am…

实习工作之定时任务

需求&#xff1a;在当天晚上12点定时将过期数据的状态置为冻结状态 版本一代码实现[相当于是一个死代码&#xff0c;因为不能自动调度] public void updateStatus() throws CommonException, ParseException {String date_str "2023-07-01 00:00:00";Date expireT…

为什么我从 Manjaro Linux 跳到 EndeavourOS

我使用 Manjaro Linux 已经两年了,但随着时间的推移,我最初对 Manjaro 的喜爱逐渐减少,我对它的感觉越来越不舒服。这就是我转向 EndeavourOS 的原因。 我根本不是你所说的 Distrohopper 我早在 20 世纪 90 年代中期就开始使用 Linux,当时使用的是 RedHat Linux。2003 年…

网络请求库-axios的入门指南

网络请求库axios-入门指南 网络请求库-axios认识axios库axios发送请求axios基本使用axios基本演练配置baseURLaxios创建实例axios发送多个请求&#xff08;了解&#xff09; axios请求和响应拦截器axios请求封装&#xff08;简洁&#xff09; 网络请求库-axios 认识axios库 有…

使用 Maya Mari 设计 3D 波斯风格道具(p2)

今天瑞云渲染小编给大家带来了Simin Farrokh Ahmadi 分享的Persian Afternoon 项目过程&#xff0c;解释了 Maya 和 Mari 中的建模、纹理和照明过程。由于篇幅较长&#xff0c;分上下两篇来分别阐述。接着会继续讲述Persian Afternoon 项目过程的纹理和灯光渲染方面内容。 纹理…

Apikit 自学日记:安装、使用浏览器插件测试

Apikit 研发管理和自动化测试产品中&#xff0c;提供了多种发起 API 测试的方式&#xff1a; 服务器测试&#xff1a;通过 Apikit 官方远程服务器发送请求&#xff0c;不需要安装任何插件&#xff0c;但是无法访问本地服务器(localhost)、内网、局域网。 插件测试&#xff1a;…

linux创建软链接

目录 软链接的作用创建软链接删除软链接修改链接 软链接的作用 就如同电影里演的一样&#xff0c;为保护价值昂贵的钻石&#xff0c;做一个和真正的钻石一模一样的假钻石来掩人耳目&#xff0c;假钻石的信息和真的一模一样&#xff0c;看到假的钻石就如同看到真的一样。Linux中…

《基于AidLux的自动驾驶智能预警应用方案》

YOLOP模型转ONNX ONNX是开放式神经网络(Open Neural Network Exchange)的简称&#xff0c;ONNX的规范及代码主要由微软&#xff0c;亚马逊&#xff0c;Facebook和IBM等公司共同开发&#xff0c;以开放源代码的方式托管在Github上。目前官方支持加载ONNX模型的框架有&#xff1…

记录实现QT和qml model/view 交互时候遇到的坑

使用QT的model/view 建立全局静态变量 打印发现有值输出 但是界面无日志显示 原因是一开始使用调用函数传参传的logModel参数加了const参数修饰 这个错误太傻了&#xff0c;找了半天一直怀疑外部类的问题 其实setContextProperty是这么用的 传QObject类型的引用之后它内部会…

【无标题】下载redis工具RESP.app(RedisDesktopManager)

1、安装前提&#xff1a; Windows&#xff1a; 1、Install Microsoft Visual C 2015-2019 x64 (If you have not already). 2、Download Windows Installer from http://redisdesktop.com/download. (Requires subscription)指导手册地址&#xff1a; https://docs.resp.app/…

DataSecurity Plus金融行业案例

摘要&#xff1a;DataSecurity Plus是一款强大的数据安全解决方案&#xff0c;为金融机构提供全面的数据保护和合规性监控。本文将介绍DataSecurity Plus在金融行业的使用案例&#xff0c;包括文件审计、数据分类和合规性报告等功能的应用。 DataSecurity Plus 文件审计&#…

《The book of why》读书笔记 -- introduction:mind over data

最近在浅学causal learning&#xff0c;拜读《The Book of Why》&#xff0c;记录一些笔记&#xff0c;下为书的introduction部分 下面这段话我觉得写得非常好 This book tells the story of a science that has changed the way we distinguish facts from fiction and yet ha…

性能测试如何做?资深10年测试带你揭秘,测试之路进阶...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 在做功能测试、自…

医学访问学者面试技巧注意

医学访问学者面试是获得进一步学术发展和研究机会的重要环节。在面试过程中&#xff0c;准备充分并注意一些关键技巧可以帮助你增加成功的机会。以下是知识人网小编整理的一些建议和技巧&#xff0c;希望对你在医学访问学者面试中取得好成绩有所帮助。 1. 提前了解研究机构&…

LeetCode——找出中枢整数

一、题目 2485. 找出中枢整数 - 力扣&#xff08;Leetcode&#xff09; 给你一个正整数 n &#xff0c;找出满足下述条件的 中枢整数 x &#xff1a; 1 和 x 之间的所有元素之和等于 x 和 n 之间所有元素之和。 返回中枢整数 x 。如果不存在中枢整数&#xff0c;则返回 -1 …

统一移动门户对政企级办公来说有哪些优势?

政府机构和企业在数字化转型后&#xff0c;内部常使用多套不同的信息系统和应用程序。然而&#xff0c;这些系统和应用之间存在信息和数据隔离的问题&#xff0c;导致内部员工需要频繁切换登录&#xff0c;并容易出现信息遗漏和处理延误。这不仅妨碍了工作效率的提升&#xff0…

QML Canvas 裁剪

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 在 QML 开发中,Canvas 是一个很强大的绘图元素,可以实现各种复杂的图形效果,其中一个重要的特性就是裁剪。它的原理是使用路径或其他形状定义一个封闭区域,将绘图操作限制在该区域内,并隐藏掉超出该区域…

[k8s] arm64架构下k8s部署的坑

本次测试在华为kunpeng-920机器上&#xff0c;cpu配置如下&#xff1a; [rootmaster ~]# lscpu 架构&#xff1a; aarch64 CPU 运行模式&#xff1a; 64-bit 字节序&#xff1a; Little Endian CPU: …

软考--操作系统之文件系统多级索引

目录 概念索引结构索引表索引方式一级索引多级索引 真题分析题目1-存储文件最大长度解析题目2-多级索引占用物理块号解析题目3-综合解析总结 概念 索引结构 一个文件的信息存放在若干不连续物理块中 系统为每个文件建立一个专用数据结构——索引表&#xff0c;并将这些物理块…

快速部署K8s仪表板,助力管理轻松搞定!

https://kubernetes.io/zh-cn/docs/tasks/access-application-cluster/web-ui-dashboard/ Dashboard 是基于网页的 Kubernetes 用户界面。 你可以使用 Dashboard 将容器应用部署到 Kubernetes 集群中&#xff0c;也可以对容器应用排错&#xff0c;还能管理集群资源。 你可以使…