• 1. 响应式开发
  • 1.1. 浏览器媒体查询
    • 1.1.1. style 标签引入media另一种形式
  • 1.2. 注意：

1. 响应式开发

1.1. 浏览器媒体查询

@media screen and (min-width: 500px) and (max-width: 700px)

1.1.1. style 标签引入media另一种形式

<style media="(min-device-width: 300px) and (max-device-width: 500px)"></style>

注意max-width和300px之间是冒号不是等于号

媒体查询其他引入方式二：

link 引入media

<link href="***.css" rel="stylesheet" media="(min-device-width: 100px) and (max-device-width: 300px)"

flex给子元素设置伸缩的特殊写法：

flex: auto;  == flex: 1 1 auto;
flex: none;  == flex: 0 0 auto;（这里的auto就是子元素的width）

flex: 0%;  == flex: 1 1 0%;（百分比）
flex: 100px; ==  flex: 1 1 100px;(长度单位)

flex:1; == flex: 1 1 0%;
flex:2; == flex: 2 1 0%;

1.2. 注意：

align-items：stretch 默认值，项目被拉伸以适应容器 所以给一个表单添加height，会把输入框也变大，所以也改变align-items，比如设置为flex-start

响应式开发：1.媒体查询；2.flex布局；3.rem