犀牛的心
Subscribe
Tagged

flexbox

A collection of 2 posts

flexbox

移动端页面适配

搜索引擎热搜适配方案—rem适配:工具:1.amfe-flexible(原淘宝使用的可伸缩布局方案) 2.postcss-pxtorem(postcss的插件,用于将像素单元生成rem单位) 安装:可以直接下载amfe-flexible到public文件夹下(样例中使用这种),或者npm i -S amfe-flexible引入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <script src="/amfe-flexible.js"></script>npm install postcss-pxtorem --save同时需要安装, postcss和postcss-loader注意postcss-pxtorem最新版本会报错,需要postcss8.0支持,

北枳 Mar 31, 2022 • 2 min read
垂直居中

css垂直居中的三种实现

1.基于绝对定位它要求元素具有固定的宽度和高度。 main{ position: absolute; top: 50%; left: 50%; margin-top: -3em; /* 6/2 = 3 */ margin-left: -9em; /* 18/2 = 9 */ width: 18em; height: 6em; } 或者 main{ position: absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em; } 显然,这个方法最大的局限在于它要求元素的宽高是固定的。在通常情 况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。 如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题

元芳 Sep 28, 2017 • 2 min read
犀牛的心 © 2025
  • Contact
Powered by Ghost