viewport 和 Mediaquery 都是为了进行响应式Web设计，即面对不同的设备有不同的样式而又不用开发不同的页面。
viewport 视口，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,最常见用法

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width : 当前viewport的宽度等于设备的宽度
initial-scale=1.0 : 初始缩放比例1.0
maximum-scale=1.0 : 最大缩放比例1.0
minimum-scale=1.0 : 最小缩放比例1.0
user-scalable=no : 不允许用户手动缩放

阅读更多

@supports 可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明，这被称为特性查询。

1
2
3
4
5
6
7
8
9
10

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

阅读更多

transition 过渡

transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

在符合标准的浏览器中，transition效果结束时会触发 transitionend(propertyName, elapsedTime) 事件

阅读更多

在项目中遇到了上传头像图片的需求，包括两个部分，一个是头像的上传。另一个是上传后头像图片的显示。

头像的上传

头像的上传和普通的图片上传几乎没有不同，但通常需要对上传的图片进行限制，例如限制图片格式为png/jpg，图片大小的限制，图片像素的限制等。

阅读更多

Flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性无效。

任何一个容器都可以指定为flex布局

1
2
3
4

.box {
    display: -webkit-flex;
    display: flex;
}

flex布局由父子元素共同组成，父元素被称为flex container，子元素被称为flex item。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

阅读更多

position四个属性

阅读更多

本篇主要列举并比较下CSS中常用到的几个长度单位。包含px、em、rem、vh、vw、rpx、in、cm、mm、ex、pt、pc。

阅读更多

本篇主要介绍与折行有关的三个样式 white-space ， word-wrap ， word-break 。

阅读更多

通常一个容器有固定的宽度和高度，如果我们需要在该容器内显示超长的文本时，就需要对该段文字进行溢出处理。

1
2
3
4
5

<div class="words">
  For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the
  way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid.
  Then life would begin.
</div>

默认效果

阅读更多

某些情况下我们需要修改默认的光标样式，比如当我们为一个元素添加了点击事件之后，这个元素就会表现的像一个按钮。为了更好的用户体验，我们可以将光标样式由默认的箭头样式改为指针样式。这样，当用户划过此元素时，就会意识到这是一个可点击的元素。

阅读更多

我们都知道输入框中改变默认显示的文字是通过改变 input 的 placeholder 来实现的

1

<input type="search" placeholder="Search..." />

部分浏览器通过改变类似 -webkit-input-placeholder 的属性，使得输入框的 placeholder 也可以有自己的样式。

阅读更多

阅读更多

本篇主要介绍 calc 函数，CSS函数之一，可以在CSS中执行计算操作。

阅读更多