响应式布局(3种) + flex计算
响应式布局
- 1.媒体查询
- 2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等
- 1.rem与em
- 2.vw、vh、vmax、vmin
- 3.Flexbox
- flexbox计算题
响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。
1.媒体查询
媒体查询是最基础的实现响应式的方式
使用@media关键字
媒体查询是阶梯性的,不连续,没有完全响应
2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等
1.rem与em
rem(root em) 是相对于根元素(通常是 标签)的字体大小。适用于全局缩放和响应式布局.
em 是相对于父元素的字体大小。具有继承性,适用于局部尺寸的调整。
2.vw、vh、vmax、vmin
先来了解下网页视口相关:
屏幕的宽度和高度:window.screenWidth、window.screenHeight
网页视口的宽度和高度:window.innerWidth 、 window.innerHeight
body的宽度和高度:document.body.clientWidth、document.body.clientHeight

- 网页视口的高度=100vh
- 网页视口的宽度=100vw
- vmax 取vh和vw两者的最大值
- vmin 取vh和vw两者的最小值 所以1vh是网页视高度的百分之一,1vw是网页视口宽度的百分之一
3.Flexbox
主轴(Main Axis)、交叉轴(Cross Axis)、Flex容器(Flex Container):包含Flex项目的容器。、Flex项目(Flex Item)
设置Flex属性:使用Flex属性来控制Flex项目在主轴和交叉轴上的行为。
/* 容器属性 */.container {/* 定义为flex布局 */display: flex; /* 或 inline-flex *//* 主轴的方向 */flex-direction: row; /* 默认值,从左到右。还可以是row-reverse、column或column-reverse *//* 是否换行 */flex-wrap: nowrap; /* 默认值,不换行。还可以是wrap或wrap-reverse:当项目无法放在同一行时,它们会从容器的底部开始并向上堆叠 *//* flex-direction 和 flex-wrap 的简写 */flex-flow: row nowrap; /* 主轴上的对齐方式 */justify-content: flex-start; /* 默认值,左对齐。还可以是flex-end(右对齐)、center(中心对齐)、space-between(平分空间,左右顶边)、space-around(两侧空间是中间一半)或space-evenly(两侧空间等于中间) *//* 交叉轴上的对齐方式 */align-items: stretch; /* 默认值,项目被拉伸以适应容器的交叉轴宽度。还可以是flex-start、flex-end(从交叉轴底部排列)、center(交叉轴中间排列)或baseline *//* 多行的交叉轴上的对齐方式 */align-content: stretch; /* 默认值,行之间拉伸。也可为flex-start、flex-end、center、space-between或space-around */}
/* 项目属性 */.item {/* 排列顺序 */order: 0; /* 默认值。可以是任何整数 *//* 放大比例 */flex-grow: 0; /* 默认值。定义在分配多余空间时,项目的放大比例 *//* 缩小比例 */flex-shrink: 1; /* 默认值。定义在减少空间时,项目的缩小比例 *//* 初始大小 */flex-basis: auto; /* 默认值。初始大小 *//* 上述三个属性的简写 */flex: 0 1 auto; /* 使用flex-grow, flex-shrink 和 flex-basis的默认值 */flex: 1 1 0%; /* flex:1缩写 让所有Item平均分配剩余空间*//* 单个项目的对齐方式 */align-self: auto; /* 默认值,与继承容器的align-items值。还可以是flex-start、flex-end、center、baseline或stretch。控制交叉轴单独布局,没有与之对应的单独控制主轴的布局,除非换grid方法或加margin */
}
flexbox计算题
问题1:
你有四个项目,宽度分别为100px、150px、200px和250px,其flex-shrink值分别为2、1、3和0。
如果需要在这四个项目之间减少总共300px的空间,每个项目会减少多少像素?
解:
项目1的缩小比例为 2/6 = 1/3
项目2的缩小比例为 1/6
项目3的缩小比例为 3/6 = 1/2
项目4不会缩小,因为它的flex-shrink值为0。
项目1会减少:300px * 1/3 = 100px
项目2会减少:300px * 1/6 = 50px
项目3会减少:300px * 1/2 = 150px
项目4不会缩小。
最后宽度加上flex-basis
相关文章:
响应式布局(3种) + flex计算
响应式布局 1.媒体查询2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等1.rem与em2.vw、vh、vmax、vmin 3.Flexboxflexbox计算题 响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。 1.媒体查询 媒体查询是最基础的实现响应式的方式 使用media关键…...
Pytorch从零开始实战01
Pytorch从零开始实战——MNIST手写数字识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——MNIST手写数字识别环境准备数据集模型选择模型训练可视化展示 环境准备 本系列基于Jupyter notebook,使用Python3.7.12,Py…...
inappropriate address 127.0.0.1 for the fudge command, line ignored 时间同步的时候报错
1、安装ntp服务后,启动ntpd正常,但是在查看ntpd服务状态时,有一个红色的报错,报错信息如下: inappropriate address 127.0.0.1 for the fudge command, line ignored 2、解决方法:编辑ntp配置文件…...
linux并发服务器 —— 项目实战(九)
阻塞/非阻塞、同步/异步 数据就绪 - 根据系统IO操作的就绪状态 阻塞 - 调用IO方法的线程进入阻塞状态(挂起) 非阻塞 - 不会改变线程的状态,通过返回值判断 数据读写 - 根据应用程序和内核的交互方式 同步 - 数据的读写需要应用层去读写 …...
生信教程|替代模型选择
摘要 由于教程时间比较久远,因此不建议实操,仅阅读以了解学习。 在运行基于可能性的系统发育分析之前,用户需要决定模型中应包含哪些自由参数:是否应该为所有替换假设单一速率(如序列进化的 Jukes-Cantor 模型…...
redis持久化、主从和哨兵架构
一、redis持久化 1、RDB快照(snapshot) redis配置RDB存储模式,修改redis.conf文件如下配置: # 在300s内有100个或者以上的key被修改就会把redis中的数据持久化到dump.rdb文件中 # save 300 100# 配置数据存放目录(现…...
Python 连接 Oracle 详解
文章目录 1 首先,安装第三方库 cx_Oracle2 其次,配置命令 1 首先,安装第三方库 cx_Oracle 参考 CSDN 博客:Python 安装第三方库详解(含离线) 2 其次,配置命令 import cx_Oracle# 1.数据库连接…...
认识模块化
1. 模块化的基本概念 1.1 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组 合、分解和更换的单元。 1. 现实生活中的模块化 2.编程领域中的模块化 编程领域中的模块化,…...
2023年及以后语言、视觉和生成模型的发展和展望
一、简述 在过去的十年里,研究人员都在追求类似的愿景——帮助人们更好地了解周围的世界,并帮助人们更好地了解周围的世界。把事情做完。我们希望建造功能更强大的机器,与人们合作完成各种各样的任务。各种任务。复杂的信息搜寻任务。创造性任务,例如创作音乐、绘制新图片或…...
OpenLdap +PhpLdapAdmin + Grafana docker-compose部署安装
目录 一、OpenLdap介绍 二、PhpLdapAdmin介绍 三、使用docker-compose进行安装 1. docker-compose.yml 2. grafana配置文件 3. provisioning 四、安装openldap、phpldapadmin、grafana 五、配置OpenLDAP 1. 登陆PhpLdapAdmin web管理 2. 需要注意的细节 内容介绍参考…...
Java | 排序内容大总结
不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始,不如现在行动! 文章目录 🌴前言🌴算法整理🌴两个结论🌴总结 🌴前言 本文内容是关于选择排序、冒泡排序、插入排序…...
Go 语言入门指南:基础语法和常用特性解析
什么是Go语言? Go语言是Google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的编程语言。它用批判吸收的眼光,融合C语言、Java等众家之长,将简洁、高效演绎得淋漓尽致。 Go语言语法与C相近,但功能上有&a…...
20.添加HTTP模块
添加一个简单的静态HTTP。 这里默认读者是熟悉http协议的。 来看看http请求Request的例子 客户端发送一个HTTP请求到服务器的请求消息,其包括:请求行、请求头部、空行、请求数据。 HTTP之响应消息Response 服务器接收并处理客户端发过来的请求后会返…...
Qemu 架构 硬件模拟器
Qemu 架构 硬件模拟器 Qemu 是纯软件实现的虚拟化模拟器, 几乎可以模拟任何硬件设备, 我们最熟悉的就是能够模拟一台能够独立运行操作系统的虚拟机, 虚拟机认为自己和硬件打交道, 但其实是和 Qemu 模拟出来的硬件打交道ÿ…...
通过starrocks jdbc外表查询sqlserver
1.sqlserver环境准备,使用docker环境,可以参考使用flink sqlserver cdc 同步数据到StarRocks_gongxiucheng的博客-CSDN博客 部署获得sqlserver环境; 2.获取starrocks环境,也可以通过docker部署,参考:使用…...
ArcGIS 10.5安装教程!
软件介绍: ArcGIS Desktop 10.5中文特别版是一款功能强大的GSI专业电子地图信息编辑和开发软件,ArcGIS Desktop 包括两种可实现制图和可视化的主要应用程序,即 ArcMap 和 ArcGIS Pro。ArcMap 是用于在 ArcGIS Desktop 中进行制图、编辑、分析…...
ConstraintLayout约束布局
1.进行复杂页面布局时,最外层的根布局不要用ConstraintLayout. 示例布局: <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.co…...
通过pyinstaller将python项目打包成exe执行文件
目录 第一步:安装pyinstaller 第二步:获取一个ico图标(也即是自己这个exe文件最后的图标) 第三步:打包 第一步:安装pyinstaller pip install pyinstaller 第二步:获取一个ico图标ÿ…...
P1068 [NOIP2009 普及组] 分数线划定
题目描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行。为了选拔最合适的人才,A 市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试。面试分数线根据计划录取人数的 150 % 150\% 150% 划定,即如果计划录取 m m …...
应用在汽车新风系统中消毒杀菌的UVC灯珠
在病毒、细菌的传播可以说是一个让人敏感而恐惧的事情。而对于车内较小的空间,乘坐人员流动性大,更容易残留细菌病毒。车内缺少通风,残留的污垢垃圾也会滋生细菌,加快细菌的繁殖。所以对于车内消毒就自然不容忽视。 那么问题又来…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
Spring AOP代理对象生成原理
代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】,这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...
