- 博客(84)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 移动端是如何做适配的?
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用meta标签 图片失真情况很严重5.媒体查询media6.rem+viewport缩放（也
2021-10-22 17:13:11
2762
原创 移动端适配
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用meta标签 图片失真情况很严重5.媒体查询media6.rem+viewport缩放（也
2021-10-25 08:19:40
562
原创 1024程序员节!!
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:25:06
260
原创 1024程序员节!
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:23:02
204
原创 1024程序员节
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:22:24
103
原创 1024程序员节
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:20:57
156
原创 1024程序员节!
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:20:27
83
原创 1024程序员节!
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:19:48
66
原创 1024程序员节！Hello world
今天是2021年10月24日，作为在我第一次经历1024程序员节的一篇文章之前都不知道好的嘛！因为没有写博客，额，并没有感觉到与平常有什么不同，和平常一样的。可能不同的地方（公司）对于这个节日有不同的诠释吧。“今天是程序员节，祝 新需求不接，旧bug不改 “ 我 “What？”1024程序员节快乐 祝:没有bug毛发浓郁世界和平突然想起来今天是10月24号，欧克，我系查一下1024的由来，啊哈，是这样!又看到某些报道又联想到前段时间的朋友圈转发程序员格子衫在我身边的程序员同
2021-10-24 20:14:33
422
原创 移动端适配
适配问题整理：一、响应式：1.移动端需要设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">其中：①、width=device-width：是设置可视区宽度等于设备宽度②、initial-scale=1.0：初始化缩放比例③、maximum-scale=1.0：最大可以放大的
2021-10-24 19:53:38
75
原创 移动端适配布局
适配问题整理：一、响应式：1.移动端需要设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">其中：①、width=device-width：是设置可视区宽度等于设备宽度②、initial-scale=1.0：初始化缩放比例③、maximum-scale=1.0：最大可以放大的
2021-10-24 19:51:29
101
原创 H5 移动端适配
前言移动端的适配是前端开发者必须考虑的一个问题，适配问题也是响应式问题，那么如何开发一个响应式的H5移动端应用？即在不同的设备下元素大小与间距会有不同的变化。今天就给大家分享这个问题。一、案例说明蘑菇街:看一下蘑菇街网站是如何做适配的。下面分别截图了屏幕宽为375（iPhone6/7/8）和414（iPhone6p/7p/8p）的适配情况。二、移动端适配的两大要素rem单位默认字号：rem 单位是相对于根节点 html 字体大小的相对单位。谷歌浏览器默认字体大小为16px，即1rem =
2021-10-22 17:45:43
2754
1
原创 Vue移动端适配并解决rem影响第三方ui库样式问题
Vue移动端适配并解决rem影响第三方ui库样式问题一、项目中安装lib-flexiblenpm install lib-flexible --save二、在项目的入口main.js文件中引入lib-flexibleimport 'lib-flexible'三、安装postcss-px2rem-excludenpm install postcss-px2rem-exclude --save四、配置 postcss-px2rem-exclude1.在项目的根目录下找到文件.postcss
2021-10-22 17:40:35
816
原创 移动端适配的方案
百分比适配方式这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死需求：是四个div高度为100px，宽度等宽横向排列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,u
2021-10-22 17:36:56
109
原创 解决移动端适配的方法
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示第一种方法：viewport适配原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.//获取meta节点var metaNode = document.querySelector('meta[name=viewport]');//定义设计稿宽度为375var designWidth = 375;//计算当前屏幕的宽度与设计稿比例var scale = document.documentEle
2021-10-22 17:30:54
1173
原创 移动端适配方法比较
当我们说到适配方案的时候越来越多的人会潜意识的翻译成移动端适配方案。确实是这样，在移动端蓬勃发展的今天，移动端的适配显得尤为重要。PC应用的适配已经不是适配方案主要需要考虑的了，随着移动互联网的来临，追求移动端的完美展示才是王道。最近也在做一些活动页面的开发，对于网上的一些适配方案调研了一下，大致有百分比、媒体查询@media、rem等三种主流方案。下面对这几种方法做一些简单的整理，作为菜鸟肯定有很多的错误，希望大家指正，祝我早日走向人生巅峰。百分比适配百分比适配应该是最久远、最容易想到的一种适配方案
2021-10-22 17:25:00
129
原创 关于移动端的适配
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用meta标签 图片失真情况很严重5.媒体查询media6.rem+viewport缩放（也
2021-10-22 17:20:16
811
原创 移动端一般是如何做适配的?
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用meta标签 图片失真情况很严重5.媒体查询media6.rem+viewport缩放（也
2021-10-22 17:18:31
328
原创 移动端做适配:
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用meta标签 图片失真情况很严重5.媒体查询media6.rem+viewport缩放（也
2021-10-22 17:17:37
151
原创 逻辑思维题
逻辑思维题1、有一对兔子，从出生后第 3 个月起每个月都生一对兔子，小兔 子长到第三个月后每个月又生一对兔子，假如兔子都不死，问，前八 个月总共有多少兔子，每个月的兔子总数分别为多少？2、一球从 100 米高度自由落下，每次落地后反跳回原高度的一半； 再落下，求它在 第 10 次落地时，共经过多少米？第 10 次反弹多高？3、有 5 个人坐在一起，问第五个人多少岁？他说比第 4 个人大 2 岁。问第 4 个人岁数，他说比第 3 个人大 2 岁。问第三个人，又说比第 2 人大两岁。问第 2 个人，说比第
2021-10-22 08:42:49
76
原创 前端JS笔试题试卷
技 术 题1、使用 Promise 对象来处理异步和使用 async await 有什么区别。2、详细说明数组方法中 reduce，map, filter 这三者的作用和区别。3、谈谈你了解到的路由传参，区别，作用，注意事项等。4、路由传参中，经常会出现以下对 query 的用法，详细说明作用， 以及解决了什么问题？this.$router.push({ query:{ ...this.$route.query, page:this.page } })5、什么是本地存储？ 哪些场景下会使用？ 举
2021-10-21 17:26:26
271
原创 Vue购物车详情页
本篇介绍Vue购物车详情页template部分代码实现:<template> <div class="content shopCart"> <!-- <div class="breadcrumb"> <el-breadcrumb> <el-breadcrumb-item> <router-link :to="{name:'food'}">
2021-10-21 17:20:37
604
原创 前端JS知识点
31.cookie和session的区别session:它的数据是放在服务器上的,他比cookie来说相对安全,不会造成被他人盗用字段,因为他大了,session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。在存储大小上,Session对象没有对存储的数据量的限制，其中可以保存更为复杂的数据类型,使用上session很容易失效,用户体验很差;请描述一下 cookies sessionStorage和localstorage区别（1）
2021-10-21 17:13:22
83
原创 前端笔试题 (十二)
56.vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。**1)state：vuex的基本数据，用来存储变量2) getter：从基本数据(state)派生的数据，相当于state的计算属性3) mutation：提交更新数据的方法,是同步的。每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)4) action：和muytatio
2021-10-21 17:10:57
85
原创 前端面试题 (十一)
51.slot插槽插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。匿名插槽:我们也可以叫它单个插槽或者默认插槽。和具名插槽相对，它是不需要设置 name 属性的，它隐藏的name属性为default。具名插槽：就是slot 是带有name的，要用一个 template标签包裹作用域插槽 ：就是用来传递数据的插槽52.语义化标签: header nav main article section aside f
2021-10-21 17:08:44
211
原创 前端笔试题 (十)
46.数据类型主要包括两部分：基本数据类型： Undefined、Null、Boolean、Number 和 String引用数据类型： Object (包括 Object 、Array 、Function)区别:1、声明变量时内存分配不同2、不同的内存分配带来不同的访问机制3、复制变量时的不同4、参数传递的不同（把实参复制给形参的过程）47.同步,异步同步就是一个进程在执行某个请求时,若该请求需要一段时间才能返回信息,那么这个进程会一直等,直到收到返回信息,才会继续执行异步就是不需要
2021-10-21 17:05:38
124
原创 前端笔试题 (九)
41.递归组件组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以.1)设置组件name名称 2)在模板中直接使用 <名称/> xx-Yy的名称要写成<xxyy /> 3)使用时传入参数的方式和组件在其他组件中使用相同,注意递归终止条件 <xx :props="props"> 倘若组件需要传参数42.什么是Mixins？mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式mixins是一个js对象，它可
2021-10-21 17:01:01
131
原创 前端笔试题 (八)
36. 你有对 Vue 项目进行哪些优化？1)v-if 和 v-show 区分使用场景2)computed 和 watch 区分使用场景3)懒加载(第5)4)浏览器缓存(上面第28道题)37.网页前端性能优化的方式有哪些？1)压缩 css, js, 图片2)减少 dom 元素数量3)图片懒加载4)减少 http 请求次数， 合并 css、js 、合并图片5)巧用事件委托(上8)38. 移动端性能优化？1)尽量使用css3动画，开启硬件加速2)适当使用touch时间代替click
2021-10-21 16:55:58
147
原创 Vue 笔试题(七)
31.cookie和session的区别session,它的数据是放在服务器上的,他比cookie来说相对安全,不会造成被他人盗用字段,因为他大了,session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。在存储大小上,Session对象没有对存储的数据量的限制，其中可以保存更为复杂的数据类型,使用上session很容易失效,用户体验很差;请描述一下 cookies sessionStorage和localstorage区别（1）
2021-10-21 16:48:14
195
原创 这是CSDN教学?
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-10-21 16:34:49
71
原创 Vue 笔试题(六)
26. this.$ router.push()与this.$ routrt.replace()区别this.$ router.push() 跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。this.$ router.replace()同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。27.导航钩子1)全局导航钩子 全局前置守卫 beforeEach(to,from,nex
2021-10-19 17:18:29
359
原创 Vue 笔试题(五)
21. 单向数据流与双向数据流区别单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。双向数据：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 bug 的难度22. v-if,v-show区别v-if 是根据后面的参数决定是否渲染和销毁当前的元素节点,他后面的参数如果为false当前元素就不会被创建,它的切换开销大v-sh
2021-10-19 16:07:49
365
原创 Vue 笔试题(四)
16.computed、method、watch这三种方法的区别computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数.method是方法，只要发生重新渲染，method 调用总会执行该函数。watch 是侦听一个特定的值，当该值变化时执行特定的函数。它的依赖则是单个的，它每次
2021-10-19 10:18:27
242
原创 Vue 笔试题(三)
11.v-if v-for 优先级1，v-for的优先级高于v-if2，如果两者同时存在，可在v-for的外层包裹template这里来进行v-if判断，如果放在一起，每v-for循环一次都需要进行v-if判断（先判断了条件再看是否执行_），影响性能3，如果v-if判断出现在v-for的内部，可以通过计算属性过滤掉那么不需要的选项12.MVVM,MVCModel 代表数据模型View 代表UI视图ViewModel 负责监听 Model 中数据的改变并且控制视图的更
2021-10-19 09:42:35
350
2
原创 Vue 笔试题(二)
6. 跨域:首先一个url是由：协议、域名、端口 三部分组成。（一般端口默认80）当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。跨域产生原因出于浏览器的同源策略限制. 同源策略是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击.非同源会出现的限制 无法读取非同源网页的cookie、localstorage等 无法接触非同源网页的DOM和js对象 无法向非同源地址
2021-10-19 09:27:35
584
原创 Vue 笔试题(一)
1. 双向绑定的原理当一个Vue实例创建时，Vue会遍历data属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher, 它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而使它关联的组件得以更新。vue中双向绑定是一个指令v-model，是语法糖，默认情况下相于:value和@input。使用v-model可以
2021-10-19 09:17:33
1332
原创 小白只发有用的面试题----(三)
11、如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？a.margin:xpx auto;b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。实现居中关键在于 margin设置与 position:relative. .div { width:500px ; height:300px; margin: -150px 0 0 -250px; position:relat
2021-10-15 15:49:19
75
原创 小白只发有用的面试题--(二)
6、iframe有哪些优缺点？优点： 1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的”服务器推”技术 2.跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。 3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代
2021-10-15 15:32:30
73
原创 小白只更新有用的笔试题--(一)
1、html5为什么只需要写<!doctype html>?答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl
2021-10-15 15:27:06
76
随机颜色小DEMO。。
2020-12-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人