rem（font size of the root element）是相对长度单位。 相对于根元素（即 html 元素）font-size 计算值的倍数。 适配原理：将 px 替换成 rem，动态修改 html 的 font-size 适配。 也就是说最低兼容到 375 像素的…

今天的主角不是响应式页面怎么写,这个话题有点广,以后有时间再写好了.今天我们就来聊一聊响应式布局中很重要的一个点:媒体查询. 定义不同的样式.通常在设计响应式页面中,media属性是非常有用的.我们可以将这个属性设置在style标签上.下面是一个媒体功能查询,其作用是查询屏幕的…

传统的项目开发中，我么只会用到px、%、em这几个单位，它们可以适用于大部分的项目开发，并且具有良好的兼容性。 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位。 利用这些新的单位开发出比较良好的响应式页面，适应多种…

背景 在高清屏（Retina）下移动端的 1px 会很粗， 如下面图一是假的 1 像素，图二是真的 1 像素 产生原因 主要是跟 DPR(device Pixel Ratio) 设备像素比有关，它是默

目前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2， 所以css 像素只能是 0.5。

前段时间看群里面有人问关于1px的问题,顿时群里就炸开了,好像很多人都对1px这个问题不太理解,什么是1px问题?为什么2px没有问题?1px问题怎么解决?看完这篇文章相信你对这些概念有本质上的认识。 首先需要明确一点在我们开发中,1px不是一定会出现的,比如pc基本不会出现,…

既然1个css像素代表两个物理像素，设备又不认0.5px的写法，那就画1px，然后再想尽各种办法将线宽减少一半。基于这种思考,我们有以下解决方案

2. 1px边框的问题 2. background-image 和border-image类似，准备一张符合条件的边框背景图，模拟在背景上。 上面两种都需要单独准备图片，而且圆角不是很好处理，但是可以应对大部分场景。 这种方式可以满足各种场景，如果需要满足圆角，只需要给伪类也加…

所谓的等比缩放，就是设计师基于一个尺寸做一套设计图，开发工程师会基于设计图100%还原页面。在不同屏幕上的视觉呈现比例完全一致。以下图为例，屏幕尺寸虽有差异，但同一页面视觉效果完全一样，页面内容等比缩放。 这种方式最大的优点是简单、可控。设计师能对不同屏幕尺寸手机的展现效果做绝…