一、前言 大家好呀，我是summo，小网站一直有个问题，就是PC端的样式和移动端的样式是两套，并且不能根据显示屏的大小进行动态化布局，如果PC端屏幕非常小就是这样： 如果移动端屏幕非常大就是这样： 总

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。 下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC …

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。…

主要参考了大漠老师的 《再聊移动端页面的适配》和 《如何在Vue项目中使用vw实现移动端适配》，目前vw移动端适配的相关文章都比较类似，在这里做个记录 1.安装 2.配置PostCss插件 在根目录的.postcssrc.js： 1.在index.html中引入 1.img图片…

是否还在为rem适配感到烦恼？和我一样，不想去考虑单位的大小?这是除rem单位以外的另一种数据大屏适配方案。用最少的工作量，最简单的方法解决问题。可作于学习，可用于工作。

当接到可视化大屏需求时，你是否会有以下疑问：如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？

CSS Gird布局也叫二维网格布局系统，可用于布局页面主要的区域布局或小型组件。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以指定将网格元素放置在与这些行和列相关的位置上。

本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样： 思路 首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。 将两张图片叠加在一

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中…