css的一些技巧

发表于 | 分类于 |

TL;DR

inline-block

图文排版的时候，经常用到这个
布局有时也可以用这个

  • 子元素之间如果需要清除空隙，则父元素font-size:0
  • 子元素 display:inline-block;vertical-align:top;,有时还需要加font-size

device-pixel-radio

设备像素比，有各种数据的，关于具体的media

1
2
3
4
5
6
bg-image($url)
  background-image url($url.png)
  @media (min-device-pixel-radio:2),(-webkit-min-device-pixel-radio:2),(min-resolution: 2dppx)
  	background-image url($url+'@2x.png')
  @media (min-device-pixel-radio:3),(-webkit-min-device-pixel-radio:3),(min-resolution: 3dppx)
      background-image url($url+'@3x.png')

图片滤镜

具体详情
一般盒子的背景图片喜欢加模糊滤镜的效果

1
2
filter:blur(10px)
-webkit-filter:blur(10px)

省略号

如果知道字数的话，width:10em

1
2
3
text-overflow ellipsis
overflow hidden
white-space nowrap

如果文档的高度不足一屏幕，那么footer在页面底部
如果文档的高度多余一屏幕，那么footer在文档下面
思路：利用flex的特性，和min-height

1
2
3
4
5
6
7
8
9
10
11
html,body
  height 100%
section 
  min-height 100%
  display flex
  flex-direction column
div
  flex 1
footer 
  height 40px

移动端1px

解决retina屏幕的1px会显示成2px
在想要border的元素上，写个伪类，border为1px,然后将其根据dpi来进行缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
border-1px($color)
    position: relative
    &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
            transform scale(0.5)
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            transform scale(0.34)
border-none()
    &:after
        display none