Commit 2f4824bf authored by 刘磊's avatar 刘磊

feat:css常用单位详解

parent 5767ffa4
Pipeline #18495 failed with stage
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>单位px,em,rem,rpx详解,以及适配</title>
<style>
html, body { margin: 0; padding: 0; background-color: #ffffff; }
.markdown-body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; }
@media (max-width: 767px) { .markdown-body { padding: 15px; } }
.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #24292e;
font-family: system-ui, -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.markdown-body details {
display: block;
}
.markdown-body summary {
display: list-item;
}
.markdown-body a {
background-color: initial;
}
.markdown-body a:active,
.markdown-body a:hover {
outline-width: 0;
}
.markdown-body strong {
font-weight: inherit;
font-weight: bolder;
}
.markdown-body h1 {
font-size: 2em;
margin: .67em 0;
}
.markdown-body img {
border-style: none;
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
font-family: monospace,monospace;
font-size: 1em;
}
.markdown-body hr {
box-sizing: initial;
height: 0;
overflow: visible;
}
.markdown-body input {
font: inherit;
margin: 0;
}
.markdown-body input {
overflow: visible;
}
.markdown-body [type=checkbox] {
box-sizing: border-box;
padding: 0;
}
.markdown-body * {
box-sizing: border-box;
}
.markdown-body input {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.markdown-body a {
color: #0366d6;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
.markdown-body strong {
font-weight: 600;
}
.markdown-body hr {
height: 0;
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid #dfe2e5;
}
.markdown-body hr:after,
.markdown-body hr:before {
display: table;
content: "";
}
.markdown-body hr:after {
clear: both;
}
.markdown-body table {
border-spacing: 0;
border-collapse: collapse;
}
.markdown-body td,
.markdown-body th {
padding: 0;
}
.markdown-body details summary {
cursor: pointer;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: 1px solid #d1d5da;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #d1d5da;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body h1 {
font-size: 32px;
}
.markdown-body h1,
.markdown-body h2 {
font-weight: 600;
}
.markdown-body h2 {
font-size: 24px;
}
.markdown-body h3 {
font-size: 20px;
}
.markdown-body h3,
.markdown-body h4 {
font-weight: 600;
}
.markdown-body h4 {
font-size: 16px;
}
.markdown-body h5 {
font-size: 14px;
}
.markdown-body h5,
.markdown-body h6 {
font-weight: 600;
}
.markdown-body h6 {
font-size: 12px;
}
.markdown-body p {
margin-top: 0;
margin-bottom: 10px;
}
.markdown-body blockquote {
margin: 0;
}
.markdown-body ol,
.markdown-body ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.markdown-body ol ol,
.markdown-body ul ol {
list-style-type: lower-roman;
}
.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
list-style-type: lower-alpha;
}
.markdown-body dd {
margin-left: 0;
}
.markdown-body code,
.markdown-body pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
font-size: 12px;
}
.markdown-body pre {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.markdown-body :checked+.radio-label {
position: relative;
z-index: 1;
border-color: #0366d6;
}
.markdown-body hr {
border-bottom-color: #eee;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: 1px solid #d1d5da;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #d1d5da;
}
.markdown-body:after,
.markdown-body:before {
display: table;
content: "";
}
.markdown-body:after {
clear: both;
}
.markdown-body>:first-child {
margin-top: 0!important;
}
.markdown-body>:last-child {
margin-bottom: 0!important;
}
.markdown-body a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body hr {
height: .25em;
padding: 0;
margin: 24px 0;
background-color: #e1e4e8;
border: 0;
}
.markdown-body blockquote {
padding: 0 1em;
color: #6a737d;
border-left: .25em solid #dfe2e5;
}
.markdown-body blockquote>:first-child {
margin-top: 0;
}
.markdown-body blockquote>:last-child {
margin-bottom: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
.markdown-body h1 {
font-size: 2em;
}
.markdown-body h1,
.markdown-body h2 {
padding-bottom: .3em;
border-bottom: 1px solid #eaecef;
}
.markdown-body h2 {
font-size: 1.5em;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: .875em;
}
.markdown-body h6 {
font-size: .85em;
color: #6a737d;
}
.markdown-body ol,
.markdown-body ul {
padding-left: 2em;
}
.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body li {
word-wrap: break-all;
}
.markdown-body li>p {
margin-top: 16px;
}
.markdown-body li+li, .markdown-body li > ul {
margin-top: .25em;
}
.markdown-body ul li.task-list-item {
position: relative;
appearance: none;
list-style: none;
}
.markdown-body ul li.task-list-item.checked {
text-decoration-line: line-through;
color: #6e6e6e;
}
.markdown-body ul li.task-list-item:not(.checked) {
color: initial;
}
.markdown-body ul li.task-list-item::before {
content: '';
width: 13px;
height: 13px;
background-color: #fff;
position: absolute;
left: -28px;
top: 4px;
border-radius: 2px;
border: 2px solid #757575;
}
.markdown-body ul li.task-list-item.checked::before {
background-color: #1976d2;
border-color: #1976d2;
}
.markdown-body ul li.task-list-item.checked::after {
content: '';
position: absolute;
left: -22px;
top: 5px;
width: 4px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: 600;
}
.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.markdown-body table {
width: 100%;
overflow: auto;
}
.markdown-body table th {
font-weight: 600;
}
.markdown-body table td,
.markdown-body table th {
padding: 6px 13px;
border: 1px solid #dfe2e5;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #c6cbd1;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f6f8fa;
}
.markdown-body img {
max-width: 100%;
box-sizing: initial;
background-color: #fff;
}
.markdown-body p > img {
display: block;
margin: 0 auto;
}
.markdown-body img[align=right] {
padding-left: 20px;
}
.markdown-body img[align=left] {
padding-right: 20px;
}
.markdown-body code {
padding: .2em .4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,.05);
border-radius: 3px;
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
.markdown-body pre code {
display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: initial;
border: 0;
}
.markdown-body mark {
display: inline-flex;
background-color: #fff8c5;
}
.ace-tm{ background: transparent!important; }.ace_static_highlight{ font-size: unset!important; }.ace_static_highlight {font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;font-size: 12px;white-space: pre-wrap}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;contain: none;}.ace_static_highlight.ace_show_gutter .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line { position: relative; }.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}.ace-tm .ace_gutter {background: #f0f0f0;color: #333;}.ace-tm .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-tm .ace_fold {background-color: #6B72E6;}.ace-tm {background-color: #FFFFFF;color: black;}.ace-tm .ace_cursor {color: black;}.ace-tm .ace_invisible {color: rgb(191, 191, 191);}.ace-tm .ace_storage,.ace-tm .ace_keyword {color: blue;}.ace-tm .ace_constant {color: rgb(197, 6, 11);}.ace-tm .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-tm .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-tm .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-tm .ace_invalid {background-color: rgba(255, 0, 0, 0.1);color: red;}.ace-tm .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-tm .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {color: rgb(109, 121, 222);}.ace-tm .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-tm .ace_string {color: rgb(3, 106, 7);}.ace-tm .ace_comment {color: rgb(76, 136, 107);}.ace-tm .ace_comment.ace_doc {color: rgb(0, 102, 255);}.ace-tm .ace_comment.ace_doc.ace_tag {color: rgb(128, 159, 191);}.ace-tm .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-tm .ace_variable {color: rgb(49, 132, 149);}.ace-tm .ace_xml-pe {color: rgb(104, 104, 91);}.ace-tm .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-tm .ace_heading {color: rgb(12, 7, 255);}.ace-tm .ace_list {color:rgb(185, 6, 144);}.ace-tm .ace_meta.ace_tag {color:rgb(0, 22, 142);}.ace-tm .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-tm .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-tm.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}.ace-tm .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-tm .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-tm .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-tm .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-tm .ace_gutter-active-line {background-color : #dcdcdc;}.ace-tm .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-tm .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}
</style>
</head>
<body>
<article class="markdown-body">
<p><strong>三者区别:</strong></p>
<br/>
<p>在css中单位长度用的最多的是px、em、rem,这三个的区别是:</p>
<p>一、px是固像素。</p>
<p>二、em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。</p>
<p>三、em是相对于其父元素来设置字体大小的,一般都是以<body>的“font-size”为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。</p>
<p>rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。</p>
<p>四 rpx 是微信小程序独有的,解决屏幕自适应的尺寸单位</p>
<p>可以根据屏幕宽度进行自适应,不论屏幕大小,规定屏幕宽为 750rpx,通过rpx设置元素和字体大小,小程序在不同尺寸的屏幕上可以自适应适配</p>
<pre><code><div class='ace-tm'><div class='ace_static_highlight' style='counter-reset:ace_line 0'><div class='ace_line'>rpx<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>:<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>
</div><div class='ace_line'>
</div><div class='ace_line'><span class='ace_cjk' style='width:NaNpx'></span>rpx<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>750<span class='ace_cjk' style='width:NaNpx'></span>(<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>750rpx)
</div><div class='ace_line'>
</div><div class='ace_line'> ·<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>1rpx<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>
</div><div class='ace_line'>
</div><div class='ace_line'> ·<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>1rpx<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>
</div><div class='ace_line'>
</div><div class='ace_line'> <span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>rpx<span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>
</div><div class='ace_line'>
</div><div class='ace_line'> <span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span><span class='ace_cjk' style='width:NaNpx'></span>
</div></div></div></code></pre>
<pre><code class="language-javascript"><div class='ace-tm'><div class='ace_static_highlight' style='counter-reset:ace_line 0'><div class='ace_line'><span class='ace_identifier'>uni</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>getImageInfo</span><span class='ace_paren ace_lparen'>({</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_identifier'>src</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_identifier'>options</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>url</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_entity ace_name ace_function'>success</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_storage ace_type'>function</span><span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>img</span><span class='ace_paren ace_rparen'>)</span> <span class='ace_paren ace_lparen'>{</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_storage ace_type'>console</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_support ace_function ace_firebug'>log</span><span class='ace_paren ace_lparen'>(</span><span class='ace_string'>&#39;img&#39;</span><span class='ace_punctuation ace_operator'>,</span><span class='ace_identifier'>img</span><span class='ace_paren ace_rparen'>)</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_storage ace_type'>let</span> <span class='ace_identifier'>size</span> <span class='ace_keyword ace_operator'>=</span> <span class='ace_identifier'>options</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>maxSize</span> <span class='ace_keyword ace_operator'>||</span> <span class='ace_constant ace_numeric'>0</span><span class='ace_punctuation ace_operator'>;</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_identifier'>_this</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>canvasWidth</span> <span class='ace_keyword ace_operator'>=</span><span class='ace_identifier'>img</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>weight</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_identifier'>_this</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>canvasHeight</span> <span class='ace_keyword ace_operator'>=</span> <span class='ace_identifier'>img</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>height</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_identifier'>_this</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>$nextTick</span><span class='ace_paren ace_lparen'>(</span><span class='ace_storage ace_type'>function</span><span class='ace_paren ace_lparen'>(</span><span class='ace_paren ace_rparen'>)</span> <span class='ace_paren ace_lparen'>{</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_identifier'>_this</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_identifier'>otherCanvasDraw</span><span class='ace_paren ace_lparen'>(</span><span class='ace_identifier'>options</span><span class='ace_punctuation ace_operator'>,</span> <span class='ace_identifier'>img</span><span class='ace_paren ace_rparen'>)</span><span class='ace_punctuation ace_operator'>;</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_paren ace_rparen'>})</span><span class='ace_punctuation ace_operator'>;</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_paren ace_rparen'>}</span>
</div><div class='ace_line'><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span><span class='ace_indent-guide'> </span> <span class='ace_paren ace_rparen'>})</span><span class='ace_punctuation ace_operator'>;</span>
</div><div class='ace_line'>
</div><div class='ace_line'>
</div><div class='ace_line'><span class='ace_paren ace_lparen'>{</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;height&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_constant ace_numeric'>4032</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;orientation&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_string'>&#34;up&#34;</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;path&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_string'>&#34;file:///var/mobile/Containers/Data/Application/E62851A4-C388-4D57-8622-8C6770EDBE47/Documents/Pandora/apps/6B84F7569A2C047C0A0CE1E9E9593827/doc/uniapp_temp_1693364938739/camera/photo_001.jpg&#34;</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;type&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_string'>&#34;jpeg&#34;</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;width&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_constant ace_numeric'>3024</span><span class='ace_punctuation ace_operator'>,</span>
</div><div class='ace_line'> <span class='ace_string'>&#34;errMsg&#34;</span><span class='ace_punctuation ace_operator'>:</span> <span class='ace_string'>&#34;getImageInfo:ok&#34;</span>
</div><div class='ace_line'><span class='ace_paren ace_rparen'>}</span>
</div></div></div></code></pre>
<img src="3a6db2361fc4783667d9f017c4c2d4f2.png" alt="截图" style="zoom:50%;" />
<p>像素(pixel)、分辨率(resolution)、CSS长度单位这些概念都不陌生,但是对它们之间的关系是否清楚呢?以及如何区分应用场景?本文将带你搞懂这些内容。</p>
<h2>像素</h2>
<p><strong>像素</strong>是图像的基本采样单位,它不是一个确定的物理量,也不是一个具体的点或小方块(尽管可以用点或小方块来呈现),而是一个抽象概念。</p>
<p>不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.3mm之间。</p>
<table>
<thead>
<tr>
<th>尺寸</th>
<th>分辨率</th>
<th>点距</th>
</tr>
</thead>
<tbody>
<tr>
<td>18.5英寸</td>
<td>16:9宽屏(1366×768 )</td>
<td>0.300mm×0.300mm</td>
</tr>
<tr>
<td>21.5英寸</td>
<td>16:9宽屏(1920×1080)</td>
<td>0.248mm×0.248mm</td>
</tr>
<tr>
<td>24英寸</td>
<td>16:9宽屏(1920×1080)</td>
<td>0.276mm×0.276mm</td>
</tr>
<tr>
<td>30英寸</td>
<td>16:10宽屏(2560×1600)</td>
<td>0.2505mm×0.2505mm</td>
</tr>
</tbody>
</table>
<br/>
<p><strong>设备像素</strong>: 设备的物理像素,其尺寸大小是绝对的。</p>
<p><img src="9d92e7728834d74ebd9481e454bc83ae.png" alt="截图"></p>
<p><strong>逻辑像素</strong>: CSS 的像素单位,其尺寸大小是相对的,也称为独立像素。</p>
<p><img src="a3cfe9659c02921998cca5fd9cc8d170.png" alt="截图"></p>
<p><strong>DPI(dots per inch)</strong>: 像素密度,表示水平或垂直方向每英寸长度的像素数目。</p>
<p><strong>PPI(pixels per inch)</strong>: 像素密度。</p>
<p><strong>缩放因子,设备像素比(Dpr)</strong>: 逻辑像素相对于设备像素的放大比例,可通过 window.devicePixelRatio 获得,但二者并不完全等同。</p>
<p><em>桌面设备:</em></p>
<p>100% 缩放因子:逻辑像素和物理像素一一对应,即一个逻辑像素对应一个物理像素。
较高的缩放因子(例如 200%):逻辑像素的大小是物理像素的两倍,用于高分辨率屏幕(如视网膜显示器),以提供高清晰度和更细致的图像。</p>
<br/>
<p><em>移动设备:</em></p>
<p>100% 缩放因子:逻辑像素和物理像素一一对应,即一个逻辑像素对应一个物理像素。
较低的缩放因子(例如 75%):逻辑像素的大小小于物理像素的大小,用于低密度屏幕,以适应较小的显示区域。</p>
<p><strong>设备像素 = 逻辑像素 × 缩放因子</strong>&quot;:因此css中的px的尺寸大小相对的,缩放比例越大,用px画出来的元素尺寸越小</p>
<p>设计师要求的1px是使用1排物理像素点的宽度,而开发时设置的1px是使用1排逻辑像素,而在高dpr设备中,显示1px会使用多个物理像素点,实际上我们使用了多排物理像素来显示这1px</p>
<p><strong>分辨率</strong>也叫做解析度,解像度。物理分辨率一定的情况下,显示屏越小图像越清晰;反之,显示屏大小固定时,物理分辨率越高图像越清晰。</p>
<p><strong>物理分辨率 = 屏长的设备像素 × 屏宽的设备像素</strong></p>
<p>通常我们所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与 CRT(阴极射线显像管)不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。</p>
</article>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment