随笔分类 - 移动端的那些事
1
移动端坑处理。
发表于 2021-04-30 17:19阅读：162评论：0推荐：0
摘要：1、animate.css 【注意引入的版本问题】使用：第一步. 引入animate.css文件 【cdn引入/npm】 npm install animate.css –save第二步. 给指定的元素加上指定的动画样式名官方文档： http://www.animate.net.cn/ vue用法:
阅读全文 »
发表于 2020-11-09 22:39阅读：869评论：0推荐：1
摘要：首先先谈下基本的样式存在的问题影响 1、上下拉动滚动条时卡顿、慢（Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling） body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch; } 2、
阅读全文 »
发表于 2020-04-28 13:51阅读：804评论：0推荐：0
摘要：/* 使用时候加上这个类就好了border-1px top-1px bottom-1px topBottom-1px left-1px right-1px less sass 版本*/ .border-1px, .top-1px, .bottom-1px, .topBottom-1px, .left
阅读全文 »
发表于 2018-08-14 16:40阅读：1694评论：0推荐：0
摘要：科普下： 平时很少用的css单位: 1.长度单位： rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度。视口被均分为100单位的vw; vh:相对于视口的高度。视口被均分为100单位的vh; vmax:相对于视口的宽度或高度中较大的那个。其中
阅读全文 »
发表于 2018-05-02 10:36阅读：300评论：0推荐：0
摘要：1.重置浏览器默认样式；导入基础公共样式； App.vue 或者 或者 引入字体图标, 在App.vue的style标签里面；（一般为阿里图库项目图标） @import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css') -----------------------------------------------------------...
阅读全文 »
发表于 2018-04-19 12:35阅读：771评论：0推荐：0
摘要：;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleE...
阅读全文 »
发表于 2018-04-19 10:45阅读：4373评论：0推荐：0
摘要：百分比布局，也叫做流式布局；清除移动端默认的点击高亮效果：-webkit-tap-highlight-color:transparent;base.css:*,::before,::after{ padding:0; margin:0; -webkit-box-sizing:border-box;
阅读全文 »
发表于 2018-03-19 17:48阅读：520评论：0推荐：0
摘要：rem原理与简介： 依据html根元素大小定，px转rem动态调整根元素font-size大小； 1rem = 16px; html的字体大小就是可以默认为浏览器的字体大小； 移动端适配：方式一 媒体查询@media @media screen and （max-width:320px）{ html{ font-size:20px; } } @media screen an...
阅读全文 »
发表于 2018-03-16 00:52阅读：295评论：0推荐：0
摘要：css 弹性布局： 盒子模型： box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大；（向外扩张）2.border-box 盒子模型，padding和border盒子模型不变大；（向内扩张）calc(计算公式）+ - * /基本用的四种一
阅读全文 »
发表于 2018-02-27 10:00阅读：319评论：0推荐：0
摘要：如下版权信息的样式在遇到input框的时候会跟随输入框其后 优雅的解决方式：（定位遇上键盘飘窗解决）
阅读全文 »
发表于 2017-12-20 17:30阅读：769评论：0推荐：0
摘要：mySwiper.reLoop(); 重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上； swiper.update(); 更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize
阅读全文 »
发表于 2017-10-20 19:51阅读：3358评论：0推荐：0
摘要：开发项目时候第一次遇到rem布局进入页面瞬间样式错乱问题： 解决方案（jq）：先设置body如下图，然后再显示 input框呼起键盘（必须禁用方法如下）：
阅读全文 »
发表于 2017-10-05 00:49阅读：7748评论：0推荐：1
摘要：初次开发微信公众号遇到很多问题，可能是基础不怎么牢靠，最近几天一直在看vue的东西，现在就来慢慢介绍vux和vue这个骚东西的用法： 细看文档一步步来， npm install vux --save 安装vux这个ui框架， .vue文件中调用组件 main.js中调用plugin（插件） 个人理解
阅读全文 »
发表于 2017-09-19 22:23阅读：188评论：0推荐：0
摘要：1.HTML代码转化成DOM 2.CSS代码转化成CSSOM（CSS Object Model） 3.结合DOM和CSSOM生成一颗渲染树（包括每个节点的视觉信息） 4.生成layout（布局），即是将所有渲染树的所有节点进行平面合成 5.将布局绘制（paint）屏幕上 以上五个步骤第一到第三步是很
阅读全文 »
发表于 2017-09-15 20:56阅读：210评论：0推荐：0
摘要：px-em-rem
阅读全文 »
发表于 2017-09-06 14:53阅读：717评论：0推荐：0
摘要：注:不要手动设置viewport，该方案自动帮你设置！！！ 代码原理 这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面
阅读全文 »
发表于 2017-09-06 14:35阅读：217评论：0推荐：0
摘要：如何使用？ 这是rem布局的核心代码，这段代码的大意是：如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640) 于是，问题来了，为什么要这样？别急，我先来一一回答 为什么是64
阅读全文 »
发表于 2017-09-04 20:34阅读：212评论：0推荐：0
摘要：移动h5自适应布局 动态更改html元素大小
阅读全文 »
发表于 2017-09-04 15:49阅读：296评论：0推荐：0
摘要：声明文档使用的字符编码 <meta charset='utf-8'>优先使用 IE 最新版本和 Chrome <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="wap-font-scale" cont
阅读全文 »
发表于 2017-08-15 23:43阅读：1164评论：0推荐：0
摘要：1.移动端左右滑动右侧有留白 出现这种问题的话查看一下自己的css中有没有用到position:relative或者position:absolute,我做页面的时候经常遇到这个问题，百分之一百是这个原因。解决方案：只要设置html，body的width为100%，overflow：hidden就可
阅读全文 »
1
