CSS
CSS学习小计
我的名字豌豆
专注前端开发,懂一些Go啦~
展开
-
4种常见方式带你实现元素水平垂直居中
我们在进行页面布局时,元素水平垂直居中是必备的布局方式之一,那么下面我们来总结三种我们常见的水平垂直居中的方式,你常常使用哪种呢?html统一代码 <div class="out"> <div class="inner"> </div> </div>table-cell布局 css代码 .out{ width: 400px; height: 400px;原创 2020-08-21 01:26:26 · 1653 阅读 · 0 评论 -
如何使用rem或viewport进行移动端适配?
在开发移动端界面时,移动端适配一直是一个比较头疼的事情,常见的移动端适配有viewport适配,rem适配,百分比适配等等,在这里我们只介绍viewport适配和rem适配。看完这篇文章相信你应该会实战操作移动端对于不同手机大小的适配问题了。一:rem适配 rem是指相对于根元素的字体大小(font-size)的单位,根标签的font-size=1rem。其可以称作为相对单位,也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值,从而动态更新rem所相对的值,使用使得移动端网原创 2020-08-11 18:13:56 · 3115 阅读 · 0 评论 -
pc端适配移动端之背景颜色和背景图片
翻开之前仿作的小米官网页面,打开谷歌浏览器的手机端界面,发现我之前做的界面背景颜色和背景图片会变得非常小,具体图如下:可以看到我们无论是背景图片或者背景颜色都没有显示出来,针对这个问题先进行了思考,我的背景图片和背景颜色的宽度是设置的100%,那只能说明父元素的宽度很窄,导致子元素的宽度只能跟随于父元素的宽度。ok,我们先来看下body的宽度。 可以看到body的宽度的减小,是导致背景图片和背景颜色变小的原因,这是因为当我们打开移动端时,body的宽度会自动变小,那么这个时候我们只需要给...原创 2020-07-27 11:52:19 · 2350 阅读 · 0 评论