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的理解的更多相关文章

  1. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  2. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  3. 关于CSS的个人理解

    CSS的个人理解 一.概念 层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理 由浏览器将C ...

  4. [css] px em rem

    一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用  1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...

  5. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  6. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  7. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  8. CSS中正确理解浮动以及clear:both的关系

    要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...

  9. 【CSS】Sass理解

    原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...

随机推荐

  1. 华为云计算IE面试笔记-FusionCompute虚拟机热迁移定义，应用场景，迁移要求，迁移过程

    *热迁移传送了什么数据?保存在哪? 虚拟机的内存.虚拟机描述信息(配置和设备信息).虚拟机的状态 虚拟机的配置和设备信息:操作系统(类别.版本号).引导方式(VM通过硬盘.光盘.U盘.网络启动)和引导 ...

  2. chrome 的 options 参数

    在使用selenium浏览器渲染技术,爬取网站信息时,默认情况下就是一个普通的纯净的chrome浏览器,而我们平时在使用浏览器时,经常就添加一些插件,扩展,代理之类的应用.相对应的,当我们用chrom ...

  3. 关于URL encode和parse

    from urllib import parses = 'https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu& ...

  4. vivo全球商城-营销价格监控方案的探索

    一.背景 现在日常官网商城的运营中有一定概率出现以下两个问题: 1)优惠信息未对齐 官网商城促销优惠的类型越来越多,能影响最终用户实付价的优惠就有抢购.满减.优惠券.代金券等.实际业务操作中存在不同促 ...

  5. Python可视化--HA Candle作图

    Overview 最近遇到一个问题,做蜡烛图,怎么把x轴变为时间轴,candlestick_ohlc中的date数据需要时整数型,当选择其他类型数据时,会报错! 具体文章请参考:如何用Python计算 ...

  6. IDEA远程部署调试Java应用程序

    IDEA远程部署调试Java应用程序 目录 IDEA远程部署调试Java应用程序 基本概述 准备工作 远程服务器准备 安装JDK 配置JAVA_HOME 项目准备 创建一个SpringBoot项目 创 ...

  7. Xcode相关

    Xcode相关的路径 Provisioning Profiles存放路径:~/Library/MobileDevice/Provisioning Profiles 所有模拟器(包括历史模拟器):~/L ...

  8. 怒肝 Linux 学习路线，这回不难

    Linux 学习路线 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮,又花 1 周肝出了 Linux 学习资料全家桶,包括学习路线.命令手册.视频.书籍.文档.实战教程.社区.工具.大 ...

  9. WCF服务调用超时错误：套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的。本地套接字超时是“00:05:30”（已解决）

    问题: 线上正式环境调用WCF服务正常,但是每次使用本地测试环境调用WCF服务时长就是出现:套接字连接已中止.这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的.本地套接字超 ...

  10. LOJ6356 四色灯（容斥+dp

    纪念第一次所有的解析全写在代码里面 QWQ 这里就简单说几句了 首先一个灯有贡献,当且仅当他被按了\(4k\)次. 那么我们定义\(f(S)\)表示\([1,n]\)中有多少个数\(x\)是集合\(S ...