移动端
手机、pad、watch、电视
-------------------------------------------------
移动端和pc端的写法一样。只不过更加注意尺寸。
移动端测试
1.浏览器模拟手机 仅供参考
2.真机测试
写移动端必须加viewport
viewport 视口
<mate name="viewport" content="width=320"/>
让页面按照320尺寸走
<mate name="viewport" content="width=device-width"/>
让页面按照设备尺寸走
<mate name="viewport" content="width=device-width,user-scalable=no"/>
禁止用户缩放
<mate name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
初始化缩放比例
<mate name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"/>
最大缩放比例
最小缩放比例
只要是移动端都要加这个viewport
================================================================
小知识点
计算样式
calc
calc(25% - 2px)
空格千万别删
---------------------------------------------------
盒子模型
width/height+padding+border
传统盒子模型
向外挤
新盒子模型
向里挤
box-sizing: border-box; 新
box-sizing: content-box; 老
弹性布局
flex布局
开启弹性布局
display: flex; float、clear都不好使
flex 每一份占的比例
flex-direction: 弹性方向
row 行(默认)
row-reverse 行反转
column 列
column-reverse 列反转
flex-wrap 是否换行
nowrap 不换行(默认值)
wrap 换行
wrap-reverse 反转换行
justify-content 水平排列
center 居中
flex-start 左侧
flex-end 右侧
space-between 平分
space-around 间距一样
align-items 垂直排列
center 居中
flex-start 上
flex-end 下
overflow 操作滚动条
overflow: hidden; 没有滚动条
overflow: auto; 自动，不超出就没有，超出就有
overflow-x: 横向
overflow-y: 纵向
rem
单位
1em 当前这个元素的一个字体大小
1rem 根字体大小 就是html的字体大小
二倍图 三倍图
320 640 960
375 750 。。。
414 828 。。。
==============================================================
尺寸/2
求新的rem
基准rem/基准宽度 = 新rem/新宽度
基准rem/基准宽度 = ?/新宽度
? = 基准rem/基准宽度*新宽度
? = 20/320*document.documentElement.clientWidth
window.onresize 当浏览器大小改变的时候触发
**********************
切记:用rem布局不要用px了。
例外：1px边框
图标
https://icomoon.io/
下载后解压
需要style.css和fonts文件夹