webAPP基础学习

###视觉基础 part-I

####1.面试中常见的像素问题

=>什么是像素?

*1.什么是px?

px-虚拟像素,css像素的单位

px是一个相对单位,相对于设备像素而言

=>相对性

a.相对于同一个设备,css像素的可变的

css像素===物理像素=>会受到缩放的影响

css像素=缩放倍数*单个物理像素宽度

b.相对于不同的设备,一个css像素可变

=>1.相对性 2.设计稿与实际屏幕不绝对

*2.DP

dp-设备像素/物理像素,单位是pt(1pt=1/72(inch))

=>dp是一个绝对单位,屏幕只要生产完成后,就固定不变了

*3.DIP

dip-设备逻辑像素===虚拟像素

*4.DPR

dpr-设备像素比

初始状态下,物理像素与css像素的初始比例关系

dpr=设备像素/css像素

-移动开发中1个css像素具体占用了多少设备像素

*5.PPI

每英寸像素取值(像素密度)-衡量单个物理像素内拥有的像素

*6.REM / EM - 动态相对单位

em:相对于父元素的字体大小,计算得出的单位

rem(root em):相对于html元素字体的大小

#####2.媒体查询 - media

根据设备大小,设置差异化的样式,从而适配不同屏幕的大小

2.完整写法

3.链接式

=>实现一定程度上的响应式=>产生了大量重复的css

####3.实际使用

rem - 根据html的根字号大小动态变化的单位

media:根据设备具体宽度动态设置css的工具

rem+media=>全响应式页面

*面试:假设设计稿是750px,那么html中font-size设置为多大合适呢?

=>rem如何设置合适的比例来还原设计稿

*追问:设计稿中有一个80px高度的div,css里真实高度是多少?

div高度=>rem的值=>结合屏幕宽度得到不同的px

屏幕宽度是320px~640px,21.33*1.6=35.xxpx

屏幕宽度在750px以上,50*1.6=80px

=>自适应的单位,原则上可以做到不同屏幕尺寸与设计稿都可以还原=>设计师不感知,开发做转换

=>如何能够让设计师也能够感受到自适应逻辑的存在?

####4.原子设计+栅格系统

将屏幕进行均分,以整体布局分块自适应+固定像素间距为框架做页面设计

=>栅格设计=>原子size的以及距离=>原子结合media+rem

####5.幻灯片

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

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

相关文章

QEMU显示虚拟化的几种选项

QEMU可以通过通过命令行"-vga type"选择为客户机模拟的VGA卡的类别,可选择的类型有多个: -vga typeSelect type of VGA card to emulate. Valid values for type arecirrusCirrus Logic GD5446 Video card. All Windows versions starting from Windows 95 should …

计算3D目标框的NMS

3D障碍物目标框&#xff08;中心点坐标XYZ、长宽高lwh、朝向角theta&#xff09;的非极大值抑制 #include <iostream> #include <vector> #include <algorithm> #include <opencv2/opencv.hpp>// 定义3D目标框的结构体 struct BoundingBox3D {double …

MySQL集群高可用架构之MMM

目录 一、MMM概述 1.1 MMM 简介 1.2 MMM高可用架构 1.3 MMM工作原理 1.4 工作流程图 二、MMM高可用双主双从架构部署 1、架构&#xff1a; 2、搭建 MySQL 多主多从模式 3、安装配置 MySQL-MMM 4、故障测试 一、MMM概述 1.1 MMM 简介 MMM&#xff08;Master-Master re…

Linux网络应用层协议之http/https

文章目录 目录 一、http协议 1.URL 2.http协议格式 3.http的方法 4.http的状态码 5.http常见header 6.实现一个http服务器 二、https协议 1.加密 2.为什么要加密 3.常见的加密方式 对称加密 非对称加密 4.https的工作过程探究 方案1 只使用对称加密 方案2 只使…

开发知识点-Git

团队协作-Git Giteegitee 创建仓库打开项目所在目录&#xff0c;右键选择Git Bush Here(你要确定电脑上已经安装了Git&#xff09;初始化本地仓库配置验证信息。 完美解决github访问速度慢介绍Git 与 SVN 区别IDEA 添加 gitee Gitee Git Gitee 大家都知道国内访问 Github 速度…

Azure Machine Learning - Azure AI 搜索中的矢量搜索

矢量搜索是一种信息检索方法&#xff0c;它使用内容的数字表示形式来执行搜索方案。 由于内容是数字而不是纯文本&#xff0c;因此搜索引擎会匹配与查询最相似的矢量&#xff0c;而不需要匹配确切的字词。本文简要介绍了 Azure AI 搜索中的矢量支持。 其中还解释了与其他 Azure…

DPDK系列之三十六报文转发

一、网络报文处理 学过网络通信的都知道&#xff0c;其实在网络的底层数据就是一包&#xff08;帧&#xff09;包的。换句话说&#xff0c;所有的网络设备转发的其实就是一包包的二进制流数据。对设备或者驱动来说&#xff0c;这些数据没有什么任何意义&#xff0c;它们只是负…

Web之HTML笔记

Web之HTML、CSS、JS Web标准一、HTML&#xff08;超文本标记语言&#xff09;HTML 基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单 Web之CSS笔记 Web标准 结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版…

LoRa模块空中唤醒功能原理和物联网应用

LoRa模块是一种广泛应用于物联网领域的无线通信模块&#xff0c;支持低功耗、远距离和低成本的无线通信。 其空中唤醒功能是一项重要的应用&#xff0c;可以实现设备的自动唤醒&#xff0c;从而在没有人工干预的情况下实现设备的远程监控和控制。 LoRa模块空中唤醒功能的原理…

HTTPS加密为什么能保证网络安全?

随着互联网的普及和发展&#xff0c;网络安全问题日益严重。为了保护用户的隐私和数据安全&#xff0c;许多网站都采用了HTTPS加密技术。那么&#xff0c;HTTPS加密为什么可以保证网络安全呢&#xff1f; 原因是HTTP协议采用的是数据明文传输方式。用户从客户端浏览器提交数据…

SHELL中的数组及其相关操作

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;博主会及时修改&#xff09; 数组 在shell中&#xff0c;可以使用数组来存储和操作一组数据。数组是由一个或多个元素组成的有序集合&am…

springboot生成PDF,并且添加水印

/*** 导出调查问卷*/ApiLog("导出调查问卷")PostMapping("/print/{id}")ApiOperationSupport(order 23)ApiOperation(value "导出报告", notes "导出报告")public void print(PathVariable Long id, HttpServletResponse response…

CentOS7设置 redis 开机自启动

CentOS7设置 redis 开机自启动 步骤1.创建redis.service文件2.重新加载所有服务3.设置开机自启动4.自由地使用linux系统命令4.1.启动 Redis 服务4.2.查看 Redis 状态(-l:查看完整的信息)4.3.停止 Redis 服务4.4.重启 Redis 服务 步骤 如果你傲娇&#xff0c;不想拷贝&#xff0…

PDF控件Spire.PDF for .NET【转换】演示:将PDF 转换为 HTML

由于各种原因&#xff0c;您可能想要将 PDF 转换为 HTML。例如&#xff0c;您需要在社交媒体上共享 PDF 文档或在网络上发布 PDF 内容。在本文中&#xff0c;您将了解如何使用Spire.PDF for .NET在 C# 和 VB.NET 中将 PDF 转换为 HTML。 Spire.Doc 是一款专门对 Word 文档进行…

虹科示波器 | 汽车免拆检修 | 2015款奔驰G63AMG车发动机偶尔自动熄火

一、故障现象 一辆2015款奔驰G63AMG车&#xff0c;搭载157发动机&#xff0c;累计行驶里程约为9.4万km。车主反映&#xff0c;该车低速行驶时&#xff0c;发动机偶尔会自动熄火&#xff0c;故障大概1个星期出现1次。 二、故障诊断 接车后路试&#xff0c;故障未能再现。用故障检…

机器人制作开源方案 | 智能快递付件机器人

一、作品简介 作者&#xff1a;贺沅、聂开发、王兴文、石宇航、盛余庆 单位&#xff1a;黑龙江科技大学 指导老师&#xff1a;邵文冕、苑鹏涛 1. 项目背景 受新冠疫情的影响&#xff0c;大学校园内都采取封闭式管理来降低传染的风险&#xff0c;导致学生不能外出&#xff0c…

GNU gold链接器 - target.cc 实现特定目标架构的支持

一、Target::do_is_local_label_name(const char* name) const 1. object.cc 中 调用target().is_local_label_name(name) 这段代码是在链接器中用于决定是否应该丢弃本地符号的部分。它包含了一些逻辑&#xff0c;以便在满足特定条件时丢弃本地符号。下面是关键部分的解释&…

SpringCloud微服务:Nacos和Eureka的区别

目录 配置&#xff1a; 区别&#xff1a; ephemeral设置为true时 ephemeral设置为false时&#xff08;这里我使用的服务是order-service&#xff09; 1. Nacos与eureka的共同点 都支持服务注册和服务拉取 都支持服务提供者心跳方式做健康检测 2. Nacos与Eu…

【git】一些容易混淆的操作

git clone vs git init: git clone&#xff1a;用于从现有的 Git 仓库复制一个副本到本地。这通常是参与一个已存在项目的起始步骤。git init&#xff1a;用于在本地创建一个新的 Git 仓库。这是开始一个全新项目的第一步。 git add vs git commit: git add&#xff1a;将更改…

在服务器导出kafka topic数据

使用Kafka自带的工具&#xff1a;Kafka提供了一个命令行工具kafka-console-consumer&#xff0c;可以用来消费指定Topic的数据并将其打印到控制台。 1.打印到控制台 命令如下&#xff1a; kafka-console-consumer.sh --bootstrap-server $kafkaHost --topic $topicName --from-…