CSS px的理解
px是像素。然而一个屏幕像素的多少是由屏幕的分辨率决定的。
取个极端的栗子:如果分辨率是1w*1w,你设置一个100px宽的输入框,你只占屏幕的1/100,但是如果屏幕的分辨率是100*100,那么你的输入框就已经把屏幕铺满了
为了验证我的猜想我拿我的电脑试了一下水
首先先创建了html文件,给一个500px*500px的div赋予背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
</body>
<style>
div {
width: 500px;
height: 500px;
background-color: red;
}
</style>
</html>
接下来是1920*1080分辨率的展示效果
然后就是800*600的分辨率展示效果
可见同样px在不同的分辨率的展示效果差别还是很大的,所以在以后写css样式中px的使用要考虑到这么一种情况,来避免一些可能出现的bug
CSS px的理解的更多相关文章
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- 关于CSS的个人理解
CSS的个人理解 一.概念 层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理 由浏览器将C ...
- [css] px em rem
一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用 1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
- CSS中正确理解浮动以及clear:both的关系
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
- 【CSS】Sass理解
原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...
随机推荐
- AD学习笔记(基础)
AD学习 1 学习思路 1.1 学什么 1.2 怎么学 2 AD本身 3 AD project 3.1 任务层级 3.2 PCB流程 4 原理图工作环境设置 5 开始 5.1工程创建 5.2 元件库介 ...
- 4.深入TiDB:执行计划执行过程详解
本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/ ...
- CF204E-Little Elephant and Strings【广义SAM,线段树合并】
正题 题目链接:https://www.luogu.com.cn/problem/CF204E 题目大意 \(n\)个字符串的一个字符串集合,对于每个字符串求有多少个子串是这个字符串集合中至少\(k\ ...
- sonarqube C# 单元测试覆盖率一栏总是0%解决办法
一.什么叫单元测试(unit testing)? 是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函 数,Java里 ...
- ServerManager.exe 0xc0000135 应用程序错误(Windows Server 2016、2019)
前言 将 Windows Server 2019或2016 .NET Framework移除. IIS卸载后,服务器管理器.控制面板部分功能.事件查看器等都无法正常开启. 解决办法 打开CMD,输入D ...
- DOC命令和批处理命令
本文章以极简的方式展现,相信能够浏览到这篇文章的人都对批命令有了一定的了解,我不会把文章写的长篇大论 重要!!! (命令/?)查看帮助文档 (命令/help)查看详细帮助文档 附:思维导图 批处理编程 ...
- NOIP 模拟六 考试总结
T1辣鸡 T1就搞得这莫不愉快.. 大致题意是给你几个矩形,矩形覆盖的点都标记上,每个矩形无重复部分,求满足(x,y) (x+1,y+1)都标记过的点对数,范围1e9. 看起来很牛的样子,我确实也被1 ...
- 痞子衡嵌入式:我的三个小项目陆续上线恩智浦官方Github
恍如眨眼间,痞子衡在飞思卡尔/恩智浦已经工作 8 年多了,前 5 年主要是在软件团队,最近 3 年在系统团队.所处团队不同,工作思维也不同,自从转到系统团队,开始跟客户打起交道,对待问题和解决问题的立 ...
- == 和 equals区别
== equals是两种字符串的方式 区别 == 是比较两个对象的引用地址值 equals是比较两个对象的具体内容 示例 package com.oop.demo06; public class De ...
- asp.net core使用identity+jwt保护你的webapi(三)——refresh token
前言 上一篇已经介绍了identity的注册,登录,获取jwt token,本篇来完成refresh token. 开始 开始之前先说明一下为什么需要refresh token. 虽然jwt toke ...