
css
MoYoon
与天斗其乐无穷!与地斗其乐无穷!与人都其乐无穷!
展开
-
vue项目开发之样式篇——postcss插件
vue项目开发之样式篇——postcss插件一、postcss插件简介及安装二、插件介绍1.postcss-advanced-variables2.postcss-partial-import3.postcss-px-to-viewport三、配置一、postcss插件简介及安装二、插件介绍1.postcss-advanced-variables2.postcss-partial-import3.postcss-px-to-viewport适合于移动端开发,将px单位转化成vh,vw百分比三、原创 2020-05-18 10:18:14 · 7002 阅读 · 1 评论 -
各种css文字样式效果——多个行内元素居中,三点,缩进,阴影等
前端基础知识——css样式学习一、文字效果一、文字效果文本垂直水平居中。(一行和多行)分两种行内元素:span是div子元素,文本位于span标签内(1).span{display: inline-block;vertical-align: middle;line-height: height;}(2).div{display: table-cell;width: 200px;bord...原创 2019-03-27 21:34:51 · 1336 阅读 · 0 评论 -
CSS3弹性盒布局总结
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在...转载 2019-04-14 17:35:57 · 292 阅读 · 0 评论 -
前端页面适配的rem换算 为什么要使用rem
前端页面适配的rem换算 为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和re...转载 2019-04-24 19:06:43 · 458 阅读 · 0 评论 -
兼容ie8及现代浏览器的多种方案实现自适应布局
css布局研究之响应式、自适应、移动端布局一、响应式布局(一)、介绍(二)、响应式布局技术1. viewport技术2.@media媒体查询二、自适应布局(一)、描述(二)实现技术1.float+absolute布局2.flex布局一、响应式布局(一)、介绍响应式布局是一种兼容pc、移动端等多种终端的样式布局。即根据屏幕的大小自适应布局,或者变化布局样式,(屏幕在拉伸时显示不同的效果比如一行...原创 2019-04-24 19:42:01 · 3086 阅读 · 2 评论