随笔分类 -  移动端

响应式布局
摘要：响应式布局 1.响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 | 设备划分 | 尺寸区间 | | | | | 超小屏幕（手机) | < 768px | | 小屏设备（平板) | = 768px ~ < 992px | | 中等屏幕（桌面显示器) | 阅读全文
posted @ 2023-01-13 10:01 chichi0002 阅读(168) 评论(0) 推荐(0)
移动端-触屏事件
摘要：移动端-触屏事件 1.触屏事件概述 touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下: | 触屏touch事件 | 说明 | | | | | touchstart | 手指触摸到一个DOM元素时触发 阅读全文
posted @ 2022-11-19 20:37 chichi0002 阅读(130) 评论(0) 推荐(0)
移动端-常用开发插件
摘要：移动端-常用开发插件 1.什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢? JS插件是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 **特点:**它一般是为了解决某个问题而专门存在，其功能单一，并且比 阅读全文
posted @ 2022-11-19 20:37 chichi0002 阅读(59) 评论(0) 推荐(0)
移动端-常见特效
摘要：移动端-常见特效 1.classList属性 classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换CSS类。有以下方法 添加类∶ element.classList.add (’类名’）; focus.classList.ad 阅读全文
posted @ 2022-11-19 20:37 chichi0002 阅读(48) 评论(0) 推荐(0)
移动端-常用开发框架
摘要：移动端-常用开发框架 1.框架概述 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 前端常用的框架有Bootstrap、Vue、Angu 阅读全文
posted @ 2022-11-19 20:37 chichi0002 阅读(620) 评论(0) 推荐(0)
背景线性渐变-webkit-linear-gradient
摘要：背景线性渐变:-webkit-linear-gradient 语法： background: linear-gradient(起始方向，颜色1，颜色2，...); background: -webkit-linear-gradient(left, red , blue) ; background: 阅读全文
posted @ 2022-11-12 10:23 chichi0002 阅读(410) 评论(0) 推荐(0)
CSS的预处理器---[Less]
摘要：CSS的预处理器 [Less] Less中文网址:http://lesscss.cn/ 常见的CSS预处理器:Sass、Less、Stylus 1.Less使用 我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。 2.Less变量 变量是指没有固定的值，可以改变的。因为 阅读全文
posted @ 2022-11-12 10:23 chichi0002 阅读(88) 评论(0) 推荐(0)
rem 适配布局
摘要：rem 适配布局 1、rem 单位 rem (root em)是一个相对单位，类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素( html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。 <s 阅读全文
posted @ 2022-11-12 10:23 chichi0002 阅读(33) 评论(0) 推荐(0)
flex 布局
摘要：flex 布局 1、传统布局于flex布局 | 传统布局 | flex布局 | | | | | 兼容性好 | 操作方便，布局极为简单，移动端应用广泛 | | 布局繁琐 | PC端浏览器支持情况较差 | | 局限性，不能在移动端很好地布局 | IE 11或更低版本，不支持或仅部分支持 | 建议： 1. 阅读全文
posted @ 2022-11-06 17:06 chichi0002 阅读(112) 评论(0) 推荐(0)
浏览器私有前缀
摘要：浏览器私有前缀 1、私有前缀 -moz-：代表Firefox浏览器私有属性 -ms-：代表ie浏览器私有属性 -webkit-：代表Safari、Chrome浏览器私有属性 -o-：代表Opera浏览器私有属性 2、提倡写法 -moz-border-radius: 10px; -webkit-bor 阅读全文
posted @ 2022-11-06 11:51 chichi0002 阅读(53) 评论(0) 推荐(0)
移动端流式布局(百分比布局)、图片格式
摘要：移动端流式布局(百分比布局)、图片格式 1、流式布局(百分比布局) 流式布局，就是百分比布局，也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。 max-width 最大宽度( ma 阅读全文
posted @ 2022-11-06 11:51 chichi0002 阅读(97) 评论(0) 推荐(0)
背景缩放 background-size
摘要：背景缩放 background-size background-size属性规定背景图像的尺寸 background-size:背景图片宽度 背景图片宽度； 单位:长度I百分比l coverlcontain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 contain把图像图像扩 阅读全文
posted @ 2022-11-06 11:50 chichi0002 阅读(122) 评论(0) 推荐(0)