移动端
关注
分享
扫一扫
文章平均质量分 56
LW0512
这个作者很懒，什么都没留下…
展开
-
uniapp获取手机号一键登录和退出登录功能
uniapp获取手机号一键登录原创 2022-09-22 10:46:22 · 2595 阅读 · 5 评论 -
uniapp获取当前经纬度 地图 支持搜索
uniapp获取当前经纬度 地图 支持搜索原创 2022-09-15 10:46:28 · 999 阅读 · 0 评论 -
移动端第二十三章 flexbjs+rem
flexbjs+rem1：rem+@media+less是我们移动端布局的第一种方案。2：flexible.js+rem是我们移动端布局的第二种方案。3：flexible.js库简介：--flexible.js库是淘宝研发的一种解决移动端页面适配不同手机尺寸的方法。--flexible.js库的优点就是可以节省我们的@media标签和less文件。--但是flexible.js库把当前页面划分了10等份，所以在计算页面基准值的时候--在750px的设计稿下面的html{font-size:75原创 2020-10-06 09:40:51 · 166 阅读 · 0 评论 -
移动端第二十二章 less+rem+media项目
less+rem+media项目1：移动端页面设计稿尺寸：--安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px--苹果手机尺寸：640px 750px2:通过less+rem+@media技术完成页面在各个手机尺寸上的显示3：手机页面的准备工作：--UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px--前端开发人员再人为的把设计稿分为若干份 如：苏宁分为 15等份 --(划分页面的份数的目的，只是为了求一个基数值原创 2020-10-06 09:38:37 · 236 阅读 · 1 评论 -
移动端第二十一章 less功能
less功能1:less 变量–css中的颜色和字号使用less 变量来存储–less 变量的命名 @color:red;–变量命名的规则：1）：必须@符号开头2）：名字不能是数字3）：名字不能包含特殊字符 @a#! @~col4) ：区分大小写--@color:red; @n:100px; @font:font-szie:100px; 2:less 嵌套css写法： #header { color: black; } #header .navigation {原创 2020-10-06 09:34:40 · 205 阅读 · 0 评论 -
移动端第二十章--响应式布局
响应式布局确定项目兼容的浏览器尺寸--NIKE 官网max-width:1024px 图片一行显示2列头部的导航和搜索消失侧边导航来到导航的位置显示--利用媒体查询写的项目叫 响应式布局比较简略的耐克官网–响应式布局效果图：具体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href=原创 2020-10-06 09:29:06 · 223 阅读 · 1 评论 -
移动端第十九章 媒体查询
媒体查询1：什么是媒体查询：媒体查询是css3新的语法：@media only screen and (min-width: ) { 属性：属性值； }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； }screen 用于电脑屏幕，平板电脑，智能手机等。only 唯一（忽略）and 并且（不常用）min-width 屏幕最小宽度值max-width 屏幕最大宽度值原创 2020-10-06 09:21:21 · 156 阅读 · 0 评论 -
移动端第十八章 rem适配布局
rem适配布局前期讲了2种布局方案，但是只能解决项目中宽可以根据设备尺寸的不同有变化，但是项目中的高固定死，没有办法改变。为了解决项目中元素的宽高根据设备尺寸的不同，宽高都有变化的目的，那么我们就来认识一下，rem布局。1：单位介绍px、em、rem区别介绍2： px像素（Pixel）是绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3：EMem是相对长度单原创 2020-10-06 09:17:15 · 853 阅读 · 0 评论 -
移动端 第十七章 弹性盒子布局
弹性盒子布局实例图:具体代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title>原创 2020-10-06 08:02:58 · 186 阅读 · 0 评论 -
移动端第十六章 弹性盒子布局
弹性盒子布局1：什么是弹性盒子布局？2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。**ie10以上浏览器支持Flex是Flexible Box的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。举例：.box{ display: flex;}注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。2：弹性盒子原创 2020-10-06 07:45:12 · 211 阅读 · 0 评论 -
移动端第十五章 流失布局（百分比）
流失布局（百分比）步骤：1：先创建项目文件，在index.html 文件里面添加视口标签2：分析观察项目结构3：移动端项目一定要在不同尺寸的设备上面多跑跑，看看页面布局会不会发生变化。4：百分比布局，不是每一个元素的尺寸必须必须写成百分百。但是百分比布局，宽写百分比，高正常写。背景精灵图写法：1 先把精灵图放到ps中打开2 通过ctrl+alt+i 打开图像大小 约束比例选对勾3 把原图改小50% 假如原图大小是400乘400 改成200乘2004 在通过ps矩形选框工具量一下图形在原创 2020-10-06 07:44:08 · 199 阅读 · 0 评论 -
移动端第十四章移动页面布局基础概念
移动页面布局基础概念1:浏览器分为2种：a:一种是pc端浏览器（谷歌，火狐，IE，欧朋，其他）b:一种是m端浏览器 --移动端浏览器只需要做 -webkit-兼容就行.pc端页面需要兼容各个浏览器，移动端页面需要兼容各个手机尺寸2:查看了解手机尺寸https://uiiiuiii.com/screen/3:什么是视口？viewport===视口，视口就是浏览器显示内容的区域。4:视口的分类：PC 端：视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。移动端分为三个原创 2020-10-06 07:43:20 · 376 阅读 · 1 评论 -
移动端第十三章多列
多列属性描述column-count规定元素应该被分隔的列数column-gap规定列之间的间隔column-rule设置列边框与border写法一样column-span规定元素应该横跨的列数column-width规定列的宽度columns规定设置 column-width 和 column-count 的简写属性实例：<!DOCTYPE html><html> <head> <me原创 2020-10-05 15:00:43 · 149 阅读 · 0 评论 -
移动端十二章3D
3dtransform-origin:基点(旋转中心点)定义x轴的写法 :left/center/right/length/%定义Y轴的写法 :top/center/bottom/20px/50%transform-origin:x y;等价写法transform: translate3d(30px,30px,800px)transform:translateZ(800px) translateX(30px) translateY(30px);transform:translateZ(80原创 2020-10-05 14:56:25 · 173 阅读 · 0 评论 -
移动端第十一章动画
动画动画属性：animationanimation-name:动画的名字animation-duration:动画完成一个周期所花费的时间(秒/毫秒)animation-timing-function:动画的速度曲线(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)animation-delay:动画何时开始animation-iteration-count:动画被播放的次数 number/infinite(无限循环) animation-dir原创 2020-10-05 14:44:54 · 146 阅读 · 0 评论 -
移动端第十章过渡
过渡transition:过渡过渡时间transition-duration: 3s;过渡属性(定义宽还是高)transition-property: all;过渡函数(运动的方式)transition-timing-function: ease;过渡延迟时间transition-delay: 4s;实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title原创 2020-10-05 14:39:53 · 117 阅读 · 0 评论 -
移动端第九章变形
变形变换/变形：transform移动：translatetranslate(X px,Y px);实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; backgro原创 2020-10-05 14:28:35 · 142 阅读 · 0 评论 -
移动端第八章背景渐变
移动端背景渐变背景渐变：分为2种： 线性渐变 linear 径向渐变 radial实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &原创 2020-10-05 08:25:09 · 178 阅读 · 0 评论 -
移动端第七章字体
字体1：文字阴影text-shadow：x y blur color, …参数x 横向偏移y 纵向偏移blur 模糊距离color 阴影颜色实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-size: 100px;原创 2020-10-05 08:21:28 · 191 阅读 · 0 评论 -
移动端第六章 盒子模型
盒子模型什么是盒子模型?原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型实例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;原创 2020-10-05 08:06:53 · 181 阅读 · 0 评论 -
移动端第五章 选择器
选择器选择器例子描述element>elementdiv>p选择 的 子元素element+elementdiv+p选择在 元素之后的相邻的 元素element~elementdiv~p选择在 元素之后的所有 元素原创 2020-10-05 08:06:40 · 217 阅读 · 0 评论 -
移动端 第四章 音频视频
音频视频audio 音频音频属性 controls 控制面板 src 路径 loop 循环次数 autoplay 自动播放 (谷歌浏览器不支持自动播放)&nb原创 2020-10-05 08:06:26 · 160 阅读 · 0 评论 -
移动端第三章新增表单控件
新增表单控件1：表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日 时:分 格式的控件（UTC时间）datetime-local: 年-月-日 时:分 格式的控件（本地时间）month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框<input type="number" name="原创 2020-10-04 16:59:44 · 206 阅读 · 0 评论 -
移动端 第二章 html5新增标签
html5新增标签1：新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）标签名 标签 案例页面头部标签 header页脚底部标签 footer导航 nav <nav> <a href=''>首页</a> <a href=''>首页</a> <a href=''>首页原创 2020-10-04 16:53:12 · 170 阅读 · 0 评论 -
移动端第一章课程概要
第一章 课程概要1.html5是什么？HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定原创 2020-10-04 16:45:09 · 272 阅读 · 0 评论