css-3:什么是响应式设计?响应式的原理是什么?如何做?

1、响应式设计是什么?
响应式网站设计(Responsive WEB desgin)是一个网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的相应和调整。
描述响应式界面最著名的一句话就是:content is like water.
大白话就是:如果将屏幕看作容器,那么内容就像是水一样。

响应式网站常见特点:
同时适配PC+平板+手机等。
标签导航在接近手持终端设备时改变为经典的抽屉式导航。
网站的布局会根据视口来调整模块的大小和位置。
在这里插入图片描述
2、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport。
在这里插入图片描述
属性对应如下:
width=device-width:是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值。
inital-scale:是缩放的初始化。
user-scalable:是用户的可以缩放的操作。

实现响应式布局的方式有如下:
媒体查询
百分比
vm/vh
rem

媒体查询:
CSS3中的增加了更多的媒体查询,就像if条件表达式一样,我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。
使用@Media查询,可以针对不同的媒体类型定义不同的样式,如:
在这里插入图片描述
当视口在375px-600px之间,设置特定的字体大小18px
在这里插入图片描述
通过媒体查询,可以通过给不同的分辨率的设备编写不同的样式来实现响应式布局,比如我们为不同的分辨率的屏幕,设置不同的背景图片。
比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现。

百分比:通过百分比单位%,来实现响应式的效果。
比如当浏览器的宽度或者高度发生变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。
height、width属性是百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素。
子元素的top/left和bottom/right如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度/宽度
子元素的padding如果设置百分比,不论垂直方向或者是水平方向,都相对于直接父亲元素的width,而于父亲元素的height无关。
子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父亲元素的width
border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度.
可以看到每个属性都使用百分比,会造成布局的复杂度,所以不建议使用百分比来实现响应式。

vm/vh
vm表示相对于视图窗口的宽度,vh表示相对于视图窗口高度。任意层级元素,在使用vm单位的情况下,1vm都等于视图宽度的百分之一。
与百分比布局很相似,在以前的文章提过与%的区别,这里就不展开述说。

rem:rem是相对于根元素HTML的font-size属性,默认情况下浏览器字体大小为16px,此时1rem=16px
可以利用前面提到的媒体查询,针对不同设备分辨率改变font-size的值。如下:
在这里插入图片描述
为了更准确监听设备可视窗口变化,我们可以在css之前插入scrpit标签,内容如下:
在这里插入图片描述
无论设备可视窗口如何变化,始终设置rem为width的1/10;
实现了百分比布局
除此之外,可以利用主流的ui框架,如element-ui,antd提供的栅格布局实现响应式。

小结:
响应式设计实现通常会从以下几方面思考:
弹性盒子(包括图片、表格、视频)和媒体查询技术
使用百分比布局创建流式布局的弹性UI,同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节
选择断点,针对不同断点实现不同布局和内容展示。

3、总结
响应式布局有点可以看到:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大、效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长。
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。

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

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

相关文章

ensp与虚拟机搭建测试环境

1.虚拟机配置 ①首先确定VMnet8 IP地址,若要修改IP地址,保证在启动Ensp前操作 ②尽量保证NAT模式 2.ensp配置 (1)拓扑结构 (2)Cloud配置 ①首先点击 绑定信息 UDP → 增加 ②然后点击 绑定信息 VMware ... → 增加 ③最后在 端口映射设置上点击双向通…

Hive创建外部表详细步骤

① 在hive中执行HDFS命令:创建/data目录 hive命令终端输入: hive> dfs -mkdir -p /data; 或者在linux命令终端输入: hdfs dfs -mkdir -p /data; ② 在hive中执行HDFS命令:上传/emp.txt至HDFS的data目录下,并命名为…

vue3+vue-i18n 监听语言的切换

最近在用 vue3 做一个后台管理系统,之前是只考虑中文,现在加了个需求是多语言。 本来也不是太难的需求,但是我用的并不熟悉,并且除了页面展示不同的语言,需求是在切换语言的时候在几个页面中需要做出一些自定义的行为&…

Openharmony重要特性之一浅析分布式软总线

OH分布式软总线 概述 简介分布式软总线的特征官方说明目录结构与代码说明分布式软总线使用 使用说明接口说明发现 发现的接口C++示例说明组网 组网的接口C++示例说明传输 软总线传输关键流程传输的接口注意事项一、概述 1.1 简介 ​ 分布式软总线能做什么? ​ 1.1 通过共享一…

50.两数之和(力扣)

目录 问题描述 核心代码解决 代码思想 时间复杂度和空间复杂度 问题描述 给定一个整数数组 和一个整数目标值 ,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。numstarget 你可以假设每种输入只会对应一个答案。但是&am…

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量,安装好jmeter 二、下载WebSocketSampler发送请求用的,地址:https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…

2.Flink应用

2.1 数据流 DataStream:DataStream是Flink数据流的核心抽象,其上定义了对数据流的一系列操作DataStreamSource:DataStreamSource 是 DataStream 的 起 点 , DataStreamSource 在StreamExecutionEnvironment 中 创 建 ,…

计算机网络各层的功能以及常用协议

目录 1. 物理层(Physical Layer)2. 数据链路层(Data Link Layer)3. 网络层(Network Layer)4. 传输层(Transport Layer)5. 应用层(Application Layer) 计算机网…

init_pg_dir 的大小及作用

init_pg_dir 的大小 vmlinux.lds.S 中 在vmlinux.lds.S 中,有 init_pg_dir .; . INIT_DIR_SIZE; init_pg_end .;/*include/asm/kernel-pgtable.h*/ #define EARLY_ENTRIES(vstart, vend, shift) \ ((((vend) - 1) >&g…

基于 CentOS 7 构建 LVS-DR 群集

文章目录 前言1、LVS集群2、DR模式的工作流程图 一、LVS DR模式的配置二、配置步骤总结 前言 什么是LVS集群?DR模式? 1、LVS集群 LVS采用的是合入内核模块,先把对于nginx来说要稳定很多,性能和稳定都在一定层度上占据优势&…

【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试

目录 怎么使用ChatGPT写履历 寻求履历的反馈 为履历加上量化数据 把经历修精简 为不同公司客制化撰写履历 怎么使用ChatGPT通过面试 汇整面试题目 给予回馈 提供追问的问题 用 STAR 原则回答面试问题 感谢面试官的 email 总结 在职场竞争激烈的今天,写一…

mysql从每个分组中取特定条件行的全部内容

取每个task_id分组中更新日期最新的一行 采用join的方式完成 select a.task_id,a.theme_id,a.time_unix from table_xxx a join (select task_id,max(time_unix) as max_timefrom table_xxxwhere date < ${date}and date > ${date} - 3and theme_i…

linux网络编程--线程池UDP

目录 学习目标 1线程池 2.UDP通信 3本地socket通信 学习目标 了解线程池模型的设计思想能看懂线程池实现源码掌握tcp和udp的优缺点和使用场景说出udp服务器通信流程说出udp客户端通信流程独立实现udp服务器代码独立实现udp客户端代码熟练掌握本地套接字进行本地进程通信 1…

FreeRTOS源码分析-10 互斥信号量

目录 1 事件标志组概念及其应用 1.1 事件标志组定义 1.2 FreeRTOS事件标志组介绍 1.3 FreeRTOS事件标志组工作原理 2 事件标志组应用 2.1 功能需求 2.2 API 2.3 功能实现 3 事件标志组原理 3.1 事件标志组控制块 3.2 事件标志组获取标志位 3.3 等待事件标志触发 3.4…

ESD接地实时监控系统有哪些功能

ESD接地实时监控系统是一种用于监测和维护静电放电&#xff08;ESD&#xff09;接地的设备和软件系统。静电放电事件可能会对敏感电子元件、设备或工作环境造成损害&#xff0c;因此对ESD接地进行有效的监控至关重要。 ESD接地实时监控系统主要包括以下几个方面的功能&#xf…

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…

PCL 可视化球图形

文章目录 一、简介二、实现代码三、实现效果修改之处一、简介 过程很简单,使用pcl::visualization::PCLVisualizer中的addSphere函数就可以了,不过PCL中默认的球的分辨率过小,不够精细,需要我们手动修改一下源码。 二、实现代码 //标准文件 #include <iostream> #in…

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件&#xff0c;并将文件解析为QImage&#xff0c;相比网上提供的开源库&#xff0c;QT自带PDF库使用更方便&#xff0c;也更加可靠&#xff0c;然而&#xff0c;QT自带PDF库的使用却不同于其他通用库的使用&#xff0c;具备一定的技巧。 1. 安装…

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…

Go语言基础: Switch语句、Arrays数组、Slices切片 详细教程案例

文章目录 一. Switch语句1. Default case2. Multiple expressions in case3. Expressionless switch4. Fallthrough5. break6. break for loop 二. Arrays数组1. when arrays are passed to functions as parameters2. Iterating arrays using range3.Multidimensional arrays …