发表于： 2019-11-25 23:54:52
1 1117
今日完成：
1px问题
随着移动端的web项目越来越多，设计师的要求也越来越高。在移动端上通过1px实现一条1像素的线时，它并不是真正的1像素，比真正的1像素要粗一点。
那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。
window.devicePixelRatio=物理像素 /CSS像素 目前主流的屏幕DPR=2 （iPhone 8）,或者3 （iPhone 8 Plus）。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。
一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。
二、解决方案
2.1 使用小数点方式
.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } } - 优点：比较方便
- 缺点：支持iOS 8+，不支持安卓。
2.2 使用伪元素
<span class="border-1px">1像素边框问题</span> // less .border-1px{ position: relative; &::before{ content: ""; position: absolute; left: 0; top: 0; width: 200%; border:1px solid red; color: red; height: 200%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.5); transform: scale(0.5); pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){ width: 300%; height: 300%; -webkit-transform: scale(0.33); transform: scale(0.33); } } } - 优点：直接通过CSS实现，无论是圆角还是直角都可以实现。
- 缺点：代码量比较多，占有了伪元素。
注意：空元素(不能包含内容的元素)不支持 ::before，::after
- IE 不支持的元素有：img，input，select，textarea。
- FireFox 不支持的元素有：input，select，textarea。
- Chrome 不支持的元素有：input[type=text]，textarea。
2.3 使用box-shadow
<span class="border-1px">1像素边框问题</span> .border-1px{ box-shadow: 0px 0px 1px 0px red inset; } - 优点：直接通过CSS实现，无论是圆角还是直角都可以实现。
- 缺点：由于是使用阴影的方式，边框线的颜色会比真实颜色淡一点。
2.4 使用border-image
弄出1px像素边框的实质是弄出0.5px这样的边框，所以我们可以利用类似于这样的图片，使得“border-image-slice”为2，那么实际上边框有一半是透明的，即可得到我们想要的“1px边框”
<div class="test">1像素边框</div> .test{ border: 1px solid transparent; border-image: url('./border-1px.png') 2 repeat; } - 优点：其实感觉没啥优点。。。
- 缺点：修改颜色麻烦, 需要替换图片；圆角需要特殊处理，并且边缘会模糊
2.5 设置viewport的scale值
根据设备像素设置viewport，代码只需要写正常像素就可以了。
<html> <head> <title>1px question</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> html { font-size: 1px; } * { padding: 0; margin: 0; } .top_b { border-bottom: 1px solid #E5E5E5; } .a,.b { box-sizing: border-box; margin-top: 1rem; padding: 1rem; font-size: 1.4rem; } .a { width: 100%; } .b { background: #f5f5f5; width: 100%; } </style> <script> var viewport = document.querySelector("meta[name=viewport]"); //下面是根据设备像素设置viewport if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); } if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'); } if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 32* (docEl.clientWidth / 750) + 'px'; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="top_b a">下面的底边宽度是虚拟1像素的</div> <div class="b">上面的边框宽度是虚拟1像素的</div> </body> </html> - 优点：全机型兼容，直接写1px不能再方便
- 缺点：适用于新的项目，老项目可能改动大,
使用伪元素实现超实用的图标库
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：
- ::first-letter 第一个字母的样式
- ::first-line 首行文字的样式
- ::before 元素头部添加的修饰
- ::after 元素尾部添加的修饰
- ::placeholder input的占位符样式
- ::selection 被选中元素的样式
我个人觉得伪元素可以解释为元素的修饰，可以为元素带来额外的附加样式，属于额外的文档结构。
伪类
用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性，比如a标签的hover表示鼠标经过的样式，visited表示访问过的链接的样式，更多的用来描述元素状态变化时的样式，伪类主要有：
- :link
- :visited
- :hover
- :active
- :focus
- :lang(fr)
- :not(s)
- :root
- :first-child
- :last-child
- :only-child
- :nth-child(n)
- :nth-last-child(n)
- :first-of-type
- :last-of-type
- :only-of-type
- :nth-of-type(n)
- :nth-last-of-type(n)
- :empty
- :checked
- :enabled
- :disabled
- :target
我们利用css伪类和伪元素可以实现很多强大的视觉效果，这里我主要介绍伪元素，如果对伪类或其他css特性感兴趣，可以看看我之前的css文章，写的很全面：
正文
先看看我们用纯css实现的图标库：
接下来我会介绍实现如上图标的方式和方法，并给出部分源码，方便大家学习。
原理
我们实现如上css图标是基于伪元素的，可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果，我们在上文中也介绍了伪元素的概念和类型，接下来让我们来实现它吧～
实现箭头
// less .arrow { position: relative; display: inline-block; line-height: 0; background-color: #ccc; &.arrow-hor { width: 16px; height: 1px; } &.arrow-hor.right::before { content: ''; position: absolute; top: -4px; right: -8px; border: 4px solid transparent; border-left: 4px solid #ccc; } } // html <span class="arrow arrow-hor right"></span> 这样就实现了一个指向右的箭头，我们用类似的方法也可以实现左箭头，上下箭头，实现双向箭头只需要加一个::after伪类并做适当定位就好了。
实现搜索图标
// less .search { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ccc; text-align: center; transform: rotate(-45deg); &::after { content: ''; display: inline-block; width: 1px; height: 4px; background-color: #ccc; } } // html <span class="search"></span> 实现头像
// less .dot-pan { position: relative; display: inline-flex; width: 60px; height: 60px; line-height: 0; align-items: center; border-radius: 50%; background-color: #06c; transform: rotate(-90deg); &::before { content: ''; display: inline-block; width: 28px; height: 40px; margin-left: -3px; border-radius: 50% 50%; flex-shrink: 0; background-color: #fff; } &::after { content: ''; display: inline-block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background-color: #fff; } } // html <span class="search"></span> 实现地点图标
// less .locate-icon { position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: #06c; &::before { content: ''; position: absolute; display: inline-block; width: 12px; height: 12px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; } &::after { content: ''; margin-top: 45px; display: inline-block; border: 15px solid transparent; border-top-color: #06c; } } // html <span class="locate-icon mr-20"></span> 实现微信图标
// less .wechat-icon { display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: rgb(68, 170, 59); &::before { content: ''; margin-top: 14px; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; box-shadow: 16px 0 0 #fff; } &::after { content: ''; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent; border-top-color: rgb(68, 170, 59); transform: rotate(-147deg); } } // html <span class="wechat-icon mr-20"></span> 实现对勾图标
// less .yes-icon { display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; background-color: green; border-radius: 50%; &::after { content: '✓'; color: #fff; font-size: 30px; font-weight: bold; } } // html <span class="yes-icon mr-20"></span> 实现眼睛（一般用于网站访问量图标）
.view-icon { display: inline-flex; justify-content: center; align-items: center; width: 58px; height: 36px; background-color: #06c; border-radius: 50%; &::after { content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; } } 导航图标
.gps-icon { position: relative; display: inline-flex; justify-content: center; align-items: center; border-width: 30px 15px 30px 15px; border-color: transparent; border-style: solid; border-bottom-color: #06c; transform: translate(10px, -16px) rotate(32deg); &::after { position: absolute; bottom: -48px; content: ''; display: inline-block; border-width: 10px 38px 30px 38px; border-color: transparent; border-style: solid; border-bottom-color: #fff; } } 实现心形图标
.logo-x { position: relative; display: inline-flex; width: 50px; height: 50px; border-radius: 50%; background-color: rgb(212, 73, 17); &::after { position: absolute; content: ''; left: 10px; top: 12px; display: inline-block; width: 20px; height: 30px; border-radius: 50%; background-color: #fff; transform: rotate(135deg); } &::before { position: absolute; content: ''; right: 10px; top: 12px; display: inline-block; width: 20px; height: 30px; border-radius: 50%; background-color: #fff; transform: rotate(-135deg); } } ps图标
.logo-ps { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 8px; background-color: rgb(15, 102, 184); &::before { position: absolute; content: ''; display: inline-block; width: 50px; height: 40px; background-color: rgba(255, 255, 255, .1); } &::after { position: absolute; content: 'PS'; font-size: 24px; display: inline-block; color: #fff; } } 实现气泡对话框
.logo-pp { display: inline-block; width: 150px; height: 50px; border-radius: 8px; background-color: rgb(68, 170, 59); &::before { content: '等你下课哦！'; margin-top: 14px; margin-left: -33px; position: absolute; color: #fff; } &::after { content: ''; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent; border-top-color: rgb(68, 170, 59); transform: rotate(-147deg) translate(-12px, 6px); } }明日计划:
完成任务十五
修改前面任务中的问题
收获:
学习了使用伪类来生成一些图标
遇到的问题:
无
返回列表
评论