移动web学习
关注
分享
扫一扫
文章平均质量分 74
分享本人学习的一些知识
步步生花@苏殿主
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
输入框输入数字限制或校验
（1）原文位置：《vue element中input限制只能输入正整数》只能输入正整数与只能输入正整数和：（2）原文位置：《element-ui / 表单之正整数验证，小数点后为0也要除外》输入限制校验判断数字、浮点的正则表达：............原创 2022-07-07 16:25:04 · 2326 阅读 · 0 评论 -
移动web第一天（字体图标、平面转换、渐变）
文章目录一、字体图标1、下载字体包2、使用方法（1）Unicode编码（2）类名3、上传矢量图二、平面转换1、位移三、渐变一、字体图标灵活性：灵活地修改样式，例如：尺寸、颜色等轻量级：体积小、渲染快、降低服务器请求次数兼容性：几乎兼容所有主流浏览器使用方便：下载字体包，使用字体图标1、下载字体包图标库：https://www.iconfont.cn/登录（新浪微博）→选择图标库→选择图标加入购物车→购物车→添加至项目→下载至本地2、使用方法（1）Unicode编码引入字体原创 2022-04-11 11:33:48 · 190 阅读 · 0 评论 -
移动web第一天之案例
用《移动web第一天》文章里的内容完成各案例文章目录一、购物车【字体图标】二、双开门【位移】一、购物车【字体图标】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt.原创 2022-04-11 11:35:54 · 252 阅读 · 0 评论 -
移动web第二天（空间转换、动画）
文章目录一、空间转换1、空间位移2、透视3、空间旋转4、立体呈现5、空间缩放二、动画1、实现步骤2、动画属性3、多组动画一、空间转换目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换1、空间位移语法transform: translate3d(x, y, z);transform: translateX(值);transform: transla原创 2022-04-12 05:00:22 · 174 阅读 · 0 评论 -
移动web第二天之案例
用《移动web第二天》文章里的内容完成各案例文章目录一、3D导航一、3D导航注意应为动态效果，建议代码运行查看旋转会改变坐标轴方向，编写代码时请注意<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2022-04-12 05:53:50 · 191 阅读 · 0 评论 -
移动web第三天（移动端、百分比布局、Flex布局）
文章目录一、移动端特点1、移动端和PC端网页不同点2、谷歌模拟器3、分辨率4、视口5、二倍图二、百分比布局三、Flex布局一、移动端特点1、移动端和PC端网页不同点PC端网页屏幕大，网页固定版心移动端网页屏幕小，网页宽度多数为100%可以使用谷歌模拟器在电脑里面边写代码边调试移动端网页效果2、谷歌模拟器按F12键或Fn+F12键后，点击图中所示：3、分辨率物理分辨率是生产屏幕时就固定的，它是不可被改变的逻辑分辨率是由软件（驱动）决定的制作网页参考逻辑分辨率移动端主流设备分辨原创 2022-04-12 16:25:02 · 151 阅读 · 0 评论 -
移动web第四天（Flex布局之主轴方向及换行）
文章目录一、Flex布局1、主轴方向2、弹性盒子换行二、使用Flex布局模型快速开发一、Flex布局1、主轴方向Flex布局模型中，弹性盒子的主轴默认是水平方向，侧轴默认是垂直方向修改主轴方向属性: flex-direction属性值作用row行, 水平(默认值)column列, 垂直row-reverse行, 从右向左column-reverse列, 从下向上2、弹性盒子换行弹性盒子换行显示: flex-wrap: wrap;调整行原创 2022-04-13 10:30:41 · 471 阅读 · 0 评论 -
移动web第五天(rem与less)
文章目录一、移动适配1、rem（1）rem单位（2）媒体查询（3）flexible.js2、less（1）Easy Less（2）注释（3）运算（4）嵌套（5）变量（6）导入（7）导出一、移动适配rem：目前多数企业在用的解决方案vw/vh：未来的解决方案【见《移动web第六天》】1、rem（1）rem单位相对单位rem单位是相对于HTML标签的字号计算结果1rem = 1HTML字号大小rem单位的尺寸= px单位数值 / 基准根字号（HTML标签的字号）（2）媒体查询原创 2022-04-14 16:55:18 · 142 阅读 · 0 评论 -
移动web第六天（vw/vh）
文章目录一、vw / vh一、vw / vh相对单位相对视口的尺寸计算结果vw：viewport width1vw=1/100视口宽度vh：viewport height1vh=1/100视口高度vw单位的尺寸=px单位数值 / (1/100视口宽度)vh单位的尺寸=px单位数值 / (1/100视口高度)vh是1/100视口高度，全面屏视口高度尺寸大，如果vw和vh混用可能会导致盒子变形。...原创 2022-04-16 11:24:52 · 290 阅读 · 0 评论 -
移动Web第七天（响应式网页：媒体查询、BootStrap）
文章目录一、媒体查询二、BootStrap1、UI框架2、BootStrap简介3、BootStrap使用步骤4、BootStrap栅格系统一、媒体查询媒体特性常用写法：max-width（从大到小）、min-width（从此到大）@media (媒体特性) { 选择器 { css属性 }} 完整写法：@media 关键词 媒体类型 and(常用)/only/not (媒体特性) { css代码 }媒体类型是用来区分设备类型的，如屏原创 2022-04-18 12:32:13 · 626 阅读 · 0 评论