移动端web
关注
分享
扫一扫
分享和记录移动端web开发知识。
玉安_ZhangDe
web前端后进之学。
咬定青山不放松，自缘身在破岩中。
千磨万击还坚劲，任尔东西南北风。
展开
-
移动端web学习07：rem + flexible.js + less语法
rem单位相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）rem单位的尺寸 = px单位数值 / 基准根字号flexible.jsflexible.js是手淘开发出的一个用来适配移动端的js框架。 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。引入方法Less在...原创 2022-04-22 21:21:02 · 175 阅读 · 0 评论 -
移动端web学习06：flex布局 之 flex属性
语法flex:1;flex:20%例如： flex:1 代表的意思是占父盒子剩余空间的1份。flex:20%代表占父盒子剩余空间的20%其实，我更喜欢flex:1 ，在我看来其实就是权重假如父元素的宽是700px，父元素里面有三个弹性盒子，第一个盒子的宽是100px，第二个盒子不写width 写flex：1，第三个盒子写 flex：2，也就是除了第一个盒子的100px，还剩600px第二盒子 1份，第三个盒子2份，一共三份，从而根据权重平分，第二个盒子flex：1代表盒子长度为2原创 2022-04-18 22:55:58 · 1440 阅读 · 0 评论 -
移动端web学习05：flex布局 之 侧轴对齐方式
align-items（适用单行）属性值 作用 flex-start 默认值，起点开始依次排序 flex-end 终点开始依次排序 center 沿侧轴居中对齐 stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（前提是弹性盒子不给高） 测试案例效果测试案例代码<!DOCTYPE html><html lang="en"><head> <meta ch原创 2022-04-18 22:33:36 · 1291 阅读 · 0 评论 -
移动端web学习04：flex布局 之 弹性盒子换行
语法：flex-wrap:wrap;案例效果：案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2022-04-18 20:42:52 · 1113 阅读 · 0 评论 -
移动端web学习03：flex布局 之 主轴对齐方式
主轴对齐方式修改主轴对齐方式属性: justify-content 属性值 作用 flex-start 默认，起点开始依次排列 flex-end 终点开始依次排序 center 沿主轴居中排列* space-around 空白间距均分在盒子两侧* space-between 空白间距均分在盒子之间* space-evenly 弹性盒原创 2022-04-18 20:34:31 · 299 阅读 · 0 评论 -
移动端web学习02：flex布局 之 主轴方向
主轴方向：属性值 作用 row 行，水平（默认值），从左到右 column 列，垂直，从上到下* row-reverse 行，从右到左 column-reverse 列，从下到上 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2022-04-18 19:58:41 · 128 阅读 · 0 评论 -
移动端web学习01：viewport设置视口，适配不同尺寸移动设备的屏幕
语法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">viewport：视口width=device-width：视口宽度 = 设备宽度initial-scale=1.0：初始化缩放1倍（不缩放，或者是no）maximum-scale=1.0 ： 最大缩放1倍user-scalable=0：用户是否能缩放原创 2022-04-18 19:10:59 · 525 阅读 · 0 评论