随笔分类 - 移动web
前端基础进阶
摘要：前端基础进阶 响应式 响应式网页 一套代码适配不同的屏幕设备 媒体查询 基本语法 根据设备宽度的变化，设置差异化样式 开发常用写法 媒体特性常用写法 max-width min-width <!DOCTYPE html><html lang="en"><head> <meta charset="UT
阅读全文
摘要：前端基础进阶 长度单位 vw / vh 使用vw单位设置网页元素的尺寸 相对单位 相对视口的尺寸计算结果 vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度 <!DOCTYPE html><html lang="e
阅读全文
摘要：前端基础进阶 移动适配 移动适配 rem ： 目前多数企业在用的解决方案 vw / vh：未来的解决方案 rem移动适配 使用rem单位设置网页元素的尺寸 长度单位 网页效果 屏幕宽度不同，网页元素尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，
阅读全文
摘要：前端基础进阶 Flex布局 主轴方向 使用flex-direction改变元素排列方向 Flex布局模型中，弹性盒子默认沿着哪个方向排列？ 水平方向。 如何实现内容垂直排列？ 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction <!DOCTYPE html><
阅读全文
摘要：前端基础进阶 移动端特点 头脑风暴 PC端网页和移动端网页的有什么不同？ PC屏幕大，网页固定版心 手机屏幕小， 网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 谷歌模拟器 使用谷歌模拟器调试移动端网页 屏幕尺寸 概念 指的是屏幕对角线的长度，一般用英寸来度量 分辨
阅读全文
摘要：前端基础进阶 空间转换 使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换 属性：transform 空间位移 使用translate实现元素空间位移效果 语法
阅读全文
摘要：前端基础进阶 字体图标 — Iconfond 使用字体图标技巧实现网页中简洁的图标效果 案例：淘宝购物车 布局标签 li > span * 3 字体图标 引入字体图标样式表 购物车和箭头span调用字体图标类名 <!DOCTYPE html><html lang="en"><head> <meta
阅读全文
