持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情
移动端视口
视口 就是浏览器显示页面内容的屏幕区域,
视口分为布局视口,视觉视口,理想视口
布局视口 layout viewport 980px看上去元素很小,通过手动缩放网页
视觉视口 visual viewport 网站的区域
理想视口 ideal viewport 需要手动添加meta视口标签通知浏览器操作
meta视口标签
name="viewport" //视口标签
width=device-width //宽度设置的是viewport宽度,可以设置device-width特殊值
user-scalable=no //用户是否可以缩放
initial-scale=1.0 //初始缩放比
maximum-scale=1.0 //最大缩放比
minimum-scale=1.0 //最小缩放比
二倍图
物理像素(分辨率)&物理像素比ppi8hui
iphone8 750px
1px 开发像素 = 2个物理像素
(视网膜屏)是一种显示技术, 物理像素点压缩至一块屏幕里,达到更高的分辨率 提高屏幕显示的细腻程度
背景缩放 background-size: cover|contain;
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
contain把图像扩展至最大尺寸.以使其宽度和高度完全适应内容区域 37.浏览器私有前缀
-moz-
-ms- 代表ie浏览器私有属性
-webkit
-o-
css盒模型
padding和border不会再撑大盒子了
box-sizing: border-box;
移动端技术方案
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮我们需要清除, 设置为transparent 完成透明/
-webkit-tap-highlight-color: transparent;
/在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式/
-webkit-appearance: none;
/禁用长按页面时的弹出菜单/
img,a {-webkit-touch-callout: none};
3D转换
transform: translateZ(100px);
transform: translate3d(0,100px,100px);
perspective 透视写在被观察的元素的父盒子上面的
rotate3d(x,y,z,deg)
x,y,z表示旋转的矢量,是标志你是否希望沿着该轴旋转
rotate3d(1,0,0,45deg)
rotate3d(1,1,0,45deg)
左手准则
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
3D呈现 t ransform-style
控制子元素是否开启三维立体环境
transform-style: flat; 子元素不开启3d立体空间 默认的
transform-style: perserve-3d;元素开启立体空间
代码写给父级,但影响的是子盒子
翻转盒子
先将后面的盒子rotateY翻转180deg
鼠标经过再沿着y轴旋转180deg
.box transform-style: perserve-3d;
body perspective: 400px;
