Urara-Blog/build/_app/immutable/pages/2022-03-29-12px.md-c628c311 2.js

import{S as cs,i as Fs,s as ds,C as J,w as fs,x as ys,y as vs,z as Es,A as es,f as ms,t as _s,B as us,X as ts,l as n,r as x,a as u,V as os,m as r,n as p,u as w,h as l,c as D,W as ns,p as i,b as d,G as t,E as Ds}from"../chunks/index-cd58b8d1.js";import{P as hs}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function Cs(S){let a,f,y,c,e,F,h,b,ps=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  I am a frontend developer with a particular interest in making things simple and automating daily tasks. I try to keep up with</span></div><div class='line'><span style="color: #EEFFFF">  security and best practices, and am always looking for new things to learn.</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,I,C,A,P,M,B,is=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">dcdcdc</span><span style="color: #89DDFF">;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">/*\u7F29\u5C0F\u57FA\u51C6\u5927\u5C0F\uFF0C\u4E5F\u5C31\u662F\u7F29\u5C0F\u540E\u7684\u5B57\u4F53\u5E94\u8BE5\u662F 10.2px=12px*0.85*/</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">12px</span><span style="color: #89DDFF">;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">/* \u7F29\u5C0F\u6BD4\u4F8B 10.2px/12px=0.85 */</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">transform</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">scale</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">0.85</span><span style="color: #89DDFF">);</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">/*\u8BBE\u7F6E\u7F29\u653E\u4E2D\u5FC3*/</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">transform-origin</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">/*(1-0.85)+1\uFF0C\u8865\u4E0A\u7F29\u5C0F\u7684\u5BBD\u5EA6\uFF0C\u8FD9\u91CC\u53EF\u4EE5\u6309\u89C6\u89C9\u6548\u679C\u8C03\u6574\u4E00\u70B9*/</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">118%</span><span style="color: #89DDFF">;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">/*\u517C\u5BB9IE*/</span></div><div class='line'><span style="color: #EEFFFF">  *</span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10.2px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,$,g,j,z,v,H,E,Z,q,T,m,N,O,L,_,G;return{c(){a=n("p"),f=x("\u5982\u8BBE\u7F6E\u5B57\u4F53\u5927\u5C0F\u4E3A 10.2px"),y=u(),c=n("h3"),e=n("a"),F=x("HTML"),h=u(),b=new os(!1),I=u(),C=n("h3"),A=n("a"),P=x("CSS"),M=u(),B=new os(!1),$=u(),g=n("p"),j=x("\u53C2\u8003\uFF1A"),z=u(),v=n("ul"),H=n("li"),E=n("a"),Z=x("css \u5C0F\u4E8E 12px \u5B57\u4F53_MAIMIHO \u7684\u535A\u5BA2-CSDN \u535A\u5BA2"),q=u(),T=n("li"),m=n("a"),N=x("css \u8BBE\u7F6E\u5B57\u4F53\u5C0F\u4E8E 12px \u7684\u65B9\u6CD5 - \u4EE3\u7801\u5148\u950B\u7F51"),O=u(),L=n("li"),_=n("a"),G=x("Set CSS font-size less than 12px in webkit browser"),this.h()},l(s){a=r(s,"P",{});var o=p(a);f=w(o,"\u5982\u8BBE\u7F6E\u5B57\u4F53\u5927\u5C0F\u4E3A 10.2px"),o.forEach(l),y=D(s),c=r(s,"H3",{id:!0});var U=p(c);e=r(U,"A",{href:!0});var V=p(e);F=w(V,"HTML"),V.forEach(l),U.forEach(l),h=D(s),b=ns(s,!1),I=D(s),C=r(s,"H3",{id:!0});var W=p(C);A=r(W,"A",{href:!0});var X=p(A);P=w(X,"CSS"),X.forEach(l),W.forEach(l),M=D(s),B=ns(s,!1),$=D(s),g=r(s,"P",{});var Y=p(g);j=w(Y,"\u53C2\u8003\uFF1A"),Y.forEach(l),z=D(s),v=r(s,"UL",{});var k=p(v);H=r(k,"LI",{});var K=p(H);E=r(K,"A",{href:!0,rel:!0,target:!0});var Q=p(E);Z=w(Q,"css \u5C0F\u4E8E 12px \u5B57\u4F53_MAIMIHO \u7684\u535A\u5BA2-CSDN \u535A\u5BA2"),Q.forEach(l),K.forEach(l),q=D(k),T=r(k,"LI",{});var R=p(T);m=r(R,"A",{href:!0,rel:!0,target:!0});var ss=p(m);N=w(ss,"css \u8BBE\u7F6E\u5B57\u4F53\u5C0F\u4E8E 12px \u7684\u65B9\u6CD5 - \u4EE3\u7801\u5148\u950B\u7F51"),ss.forEach(l),R.forEach(l),O=D(k),L=r(k,"LI",{});var ls=p(L);_=r(ls,"A",{href:!0,rel:!0,target:!0});var as=p(_);G=w(as,"Set CSS font-size less than 12px in webkit browser"),as.forEach(l),ls.forEach(l),k.forEach(l),this.h()},h(){i(e,"href","#html"),i(c,"id","html"),b.a=I,i(A,"href","#css"),i(C,"id","css"),B.a=$,i(E,"href","https://blog.csdn.net/maimiho/article/details/121548769"),i(E,"rel","nofollow noopener noreferrer external"),i(E,"target","_blank"),i(m,"href","https://www.codeleading.com/article/46263149244/"),i(m,"rel","nofollow noopener noreferrer external"),i(m,"target","_blank"),i(_,"href","https://codepen.io/mjj2000/pen/AYEqwJ"),i(_,"rel","nofollow noopener noreferrer external"),i(_,"target","_blank")},m(s,o){d(s,a,o),t(a,f),d(s,y,o),d(s,c,o),t(c,e),t(e,F),d(s,h,o),b.m(ps,s,o),d(s,I,o),d(s,C,o),t(C,A),t(A,P),d(s,M,o),B.m(is,s,o),d(s,$,o),d(s,g,o),t(g,j),d(s,z,o),d(s,v,o),t(v,H),t(H,E),t(E,Z),t(v,q),t(v,T),t(T,m),t(m,N),t(v,O),t(v,L),t(L,_),t(_,G)},p:Ds,d(s){s&&l(a),s&&l(y),s&&l(c),s&&l(h),s&&b.d(),s&&l(I),s&&l(C),s&&l(M),s&&B.d(),s&&l($),s&&l(g),s&&l(z),s&&l(v)}}}function xs(S){let a,f;const y=[S[0],rs];let c={$$slots:{default:[Cs]},$$scope:{ctx:S}};for(let e=0;e<y.length;e+=1)c=J(c,y[e]);return a=new hs({props:c}),{c(){fs(a.$$.fragment)},l(e){ys(a.$$.fragment,e)},m(e,F){vs(a,e,F),f=!0},p(e,[F]){const h=F&1?Es(y,[F&1&&es(e[0]),F&0&&es(rs)]):{};F&2&&(h.$$scope={dirty:F,ctx:e}),a.$set(h)},i(e){f||(ms(a.$$.fragment,e),f=!0)},o(e){_s(a.$$.fragment,e),f=!1},d(e){us(a,e)}}}const rs={title:"CSS \xB7 \u89E3\u51B3 Chrome \u4E2D\u5C0F\u4E8E12px\u7684\u5B57\u4F53\u4E0D\u663E\u793A\u7684\u95EE\u9898",lastmod:"2022-04-07T07:36:23.629Z",summary:"\u5148\u7528scale\u603B\u4F53\u7F29\u5C0F\u518D\u8865\u4E0A\u51CF\u5C11\u7684\u5BBD\u5EA6",created:"2022-03-29T13:46:29.228Z",tags:["CSS","CSS Trick"],categories:["CSS"],toc:!1,slug:"/2022-03-29-12px.md",path:"/2022-03-29-12px",updated:"2022-08-06T10:50:25.374Z"};function ws(S,a,f){return S.$$set=y=>{f(0,a=J(J({},a),ts(y)))},a=ts(a),[a]}class Ls extends cs{constructor(a){super(),Fs(this,a,ws,xs,ds,{})}}export{Ls as default,rs as metadata};