css
-
用css画一个正方形的div
.square{ width: 100%; height: 0; padding-top: 100%; // 百分比是依据父级容器的width来计算 } -
rem布局 => 解耦css与js
px) { @return (vm_fontsize ) * 1rem; } vm_design: 750; html { font-size: (vm_fontsize / ($vm_design / 2)) * 100vw; @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } } // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 body { max-width: 540px; min-width: 320px; }
-
1px 方案
1px细线问题可以试试关键字值: thin，例：border-bottom: thin solid orange; 除了thin，还有medium、thick两个，宽度比较：thin < medium < thick。
-
对 dpr 做不同的处理的实现
.min-device-pixel-ratio(@scale2, @scale3) { @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) { transform: @scale2; } @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) { transform: @scale3; } }
.border-1px(@color: #DDD, @radius: 2PX, @style: solid) { &::before { content: ""; pointer-events: none; display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; border: 1PX @style @color; border-radius: @radius; box-sizing: border-box; width: 100%; height: 100%; @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) { width: 200%; height: 200%; border-radius: @radius * 2; transform: scale(.5); } @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) { width: 300%; height: 300%; border-radius: @radius * 3; transform: scale(.33); } } }
.border-top-1px(@color: #DDD, @style: solid) { &::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; border-top: 1Px @style @color; transform-origin: 0 0; .min-device-pixel-ratio(scaleY(.5), scaleY(.33)); } }
-
两端对齐
// html
姓名手机号码账号密码// css div { margin: 10px 0; width: 100px; border: 1px solid red; text-align: justify; text-align-last:justify } div:after{ content: ''; display: inline-block; width: 100%; }
js
-
数字转进制数字符串
parseInt('20',2); // 16 => 以八进制为基数转为十进制 (20).toString(2); // '24' => 数字转八进制数字符串
