认识移动端

<一个幼儿园小班的前端的成长随笔,错误与不足之处,望各位大牛批评指点,谢谢!>

视口 | viewport

Meta 标签: 布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽. 我们布局的视口就多宽

1. 布局视口 | layout viewport

2. 视觉视口 | visual viewport

3. 理想视口 | ideal viewport: <Meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

物理像素 | 物理像素比

1. 物理像素: 即 分比率, iPhone8的物理像素是 750 | 在iPhone8里面1px 开发像素 = 2个物理像素

2. background-size 背景缩放 : 长度 | 百分比 | cover | contain

   • cover 把背景图像扩展至足够大, 以使背景图像完全覆盖背景区域

   • contain 把背景图像扩展至最大尺寸, 以使其宽度和高度完全适应内容区域

特殊样式

1. 自定义输入框input样式，去除外观高光 input {-webkit-appearance: none;}

2. C3盒子模型 Box-sizing: border-Box; 即width || height + padding + border + margin

3. 禁止长按页面弹出菜单 -webkit-touch-callout: none;

felx布局

1. 父元素上:

   • display:flex

   • flex-direction: row || cloumn : 主轴方向: X轴 || Y轴

   • justify-content: flex-start || flex-end || center || space-around || space-between : 主轴上的子元素排列方式:

   • flex-wrap: Nowrap || wrap 换行: 默认不换行,一行显示

   • align-content:flex-start || flex-end || center || space-around || space-between : 侧轴上的子元素排列方式(多行)

   • align-items: flex-start || flex-end || center || streth : 侧轴上的子元素排列方式(单行)

2. 子元素上:

   • flex: 1 0 auto : 三值语法

     1. 参数一: 拉伸(无单位)

     2. 参数二: 缩放(无单位i)

     3. 参数三: px || % || auto

媒体查询

• link元素中的CSS媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

 

• 样式表中的CSS媒体查询

1. 媒体查询 Media Query : @media 可以针对不同的屏幕尺寸设置不同的样式

   • 用 @media 开头 注意@符号

   • mediatype all || print || screen 媒体类型

   • 关键字 and not only

   • media feature 媒体特性 必须有小括号包含

   • 为了防止混乱，媒体查询我们最喜欢的还是从小到大来写，这样代码更简洁(具有层叠性)

  <style>
    /* 800px 以内的屏幕 body背景颜色为pink */
    @media screen and (max-width:800px) {
      body {
        background-color: pink;
      }
    }
  </style>

 

2. rem : 可以将rem理解为scale 缩放倍数来理解，是以html的font-size的倍数来处理的 等比例适配当前设备

   • em: 对于父元素 的字体大小来说的

   • rem : 相对于 html元素 字体大小来说的

less

Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器

1. less变量

   • 必须有@为前缀

   • 不能包含特殊字符

   • 不能以数字开头

   • 大小写敏感

     // 只需改动声明里的值就可以了
     @color: pink;
     //直接使用
     body{
     color:@color;
     }
     a:hover{
     color:@color;
     }

    

2. less编译

   • 通过解析器, 编译生成对应的 CSS 文件

3. less嵌套

     /* css */
     header.logo{
       width: 300px;
     }
     ​
     /* less */
     header {
       .logo {
         width: 300px;
       }
     }
     /* 1. 遇见（交集|伪类|伪元素选择器） 利用&进行连接 */
     /* 2. 简单来说就是直接套进去写，方便简洁 */

    

4. less运算

   • 乘号（*）和除号（/）的写法

   • 运算符中间左右有个空格隔开 1px + 5

   • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

   • 如果两个值之间只有一个值有单位，则运算结果就取该单位

响应式开发

响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备

1. 设备划分

   • 小于768的为超小屏幕（手机）

   • 768~992之间的为小屏设备（平板）

   • 992~1200的中等屏幕（桌面显示器）

   • 大于1200的宽屏设备（大桌面显示器）

2. 响应式需要一个父级做为布局容器 来配合子级元素来实现变化效果

   原理: 通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实 现不同屏幕下，看到不同的页面布局和样式变化

 

部分参考: [ https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ]