前端首屏宽高设计必需了解的那些事

先导结论

PC端:
安全宽度:1002px 建议最大安全宽度:1258px 首屏安全高度:710px,对于特别需求可参考:如 jd.com 及 taobao.com,做 1400px 宽度的媒体查询(media query)超出补充处理。
字体大小(font-size):一般设计为 12px、14px 和 16px 起步。

移动端:
设计统一按宽度 750px 宽度来设计,首屏内容安全高度:1100px,对于全面屏手机有特别需求可考虑使用媒体查询(media query)来对高度进行二次适配处理(一般不需要) 继续阅读

Vue CLI 中的 vue.config.js devServer.proxy 配置的一般技巧

背景

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

继续阅读

js / jQuery使用过程中常见问题

目录

一、jQuery选择器选择选中的或者disabled的选择框时attr函数无效
二、jQuery each函数的break/continue
三、jQuery 获取元素的left会值/left数值
四、js 监听元素触摸/划屏动作
五、没设置导致$(window).height()不准确问题
六、jQuery获取/设置/监听下拉选择select的值
七、jQuery获取/设置/监听输入框input的值
八、js拼接html字符串时要注意先把单引号及双引号转义,不然可能会出现页面错误
九、绑定在scroll里面的方法在手机里面经常会等滚动完后再执行,有一定的延时,如何能缩短响应速度?
十、许多li间的drag and drop拖放的实
十一、顺序执行时,用js控制删除transition css3效果后再新加transition,旧的transition还生效
十二、返回顶部
十三、完美支持所有端的[复制到剪贴板]js插件-clipboard.js
十四、H5通过WebViewJavascriptBridge与APP进行交互时,H5获取APP的数据的异步时间不确定的问题。
十五、返回底部
十六、获取当前网站根域
十七、Url编码转义
十八、JSON与字符串互转
十九、jQuery样式选择器及样式名中最好不要出现大写字母,否则可能在webview里面执行不成功
二十、使用fastclick.js时如果用label包住checkbox或者radio按钮里面同时出现其他如span或者i元素时,在ios里会出现点击不了的情况
二十一、slice与splice的使用
二十二、删除页面上所有的img和iframe
二十三、js能过userAgent判断各种设备终端
二十四、document.body.scrollTop 一直都是 0 的问题
二十五、原生js获取元素宽高
二十六、jQuery获取元素位置、宽高
二十七、js动态加载脚本
二十八、javascript 操作符(~、&、|、^、<<、>>)(操作数是32整数范围内)
二十九、audio标签声音文件如何重播?replay?
三十、js中如何使用FormData或者Ajax方式上传文件
三十一、js中的call、apply、bind的使用方法
三十二、加载js用async和defer的区别
三十三、非cookie情况下,前端实现访问终端的唯一标识:Fingerprintjs2
三十四、Debounce和Throttle的区别
三十五、原生js做上拉到底部加载
三十六、js正则过滤emoji表情输入
三十七、WPS2013造成的HTML5 file.type值异常
三十八、js如何判断网络是否正常
三十九、在QQ/微信浏览器里面使用el.scrollTo(0, 0)无效的问题
四十、js如何实现input=file对要上传的图片进行预览
四十一、如何创建一个干净的对象
四十二、0 == ” // => true、’2′ > ’11’的坑
四十三、ios8的坑。Dom类数组,要先转为数组才可以使用forEach进行遍历
四十四、为什么要用sessionStorage?
四十五、js操作视频相关用法
四十六、ios/ie11中new Date(‘2017-08-11 12:00:00’)设置日期不成功问题
四十七、canvas图片绘制后转图片url跨域问题Tainted canvases may not be exported
四十八、创建一个a链接 使用a.click()模拟点击,主流浏览器可以,但是在ie10以下不能生效
四十九、使用 void 返回纯正的undefined
五十、FormData 使用方法详解
五十一、返回、前进、刷新页面方法
五十二、js 边界,分母为 0 问题
五十三、eval 中使用正则表达式对 \ 处理异常
五十四、window.open 深度使用方法
五十五、原生 Dom 节点类似 el.style.width=100 写法无效,建议全部用字符串如 el.style.width=”100px”

继续阅读

前端页面切图布局常见问题

目录

一、IE8下[图片加文字]展示时自动换行的问题
二、设置了z-index无效
三、当文字超出范围时自动补…省略号
四、实现垂直居中
五、实现无缝十字边框
六、Iphone APP Webview中 A标签失效问题
七、Iphone/Android APP Webview中 H5页面与APP如何进行数据交互
八、如何能让H5页面适应所有分辨率的手机
九、IOS iphone/ipad safari 微信浏览器在input focus弹出输入法时 position:fixed失效问题
十、如何用CSS修改HTML5 input/textarea的 placeholder的文字颜色
十一、ios中input被默认加上了圆角问题
十二、marquee标签无js实现各种文字滚动代码(适用公告)
十三、修改滚动条样式
十四、REM部局时,元素设的height与line-height在安卓浏览器中出现偏差问题
十五、在APP中,解决webview中h5样式或者js缓存问题
十六、新版的安卓版微信内置浏览器在键盘弹出时不会触发resize动作,导致遮挡住输入框问题 
十七、移动端近似解决1像素边框问题
十八、用rem设备图片背景时会出现图片边边被截情况
十九、小米4c系列,对input类型的按钮点击不了/点击没响应的问题
二十、CSS3水平阴影、竖直阴影
二十一、华为手机虚拟键盘挤压屏幕高度
二十二、微信长按识别二维码只针对img有效,图片背景无效,而且同屏有两二维码时,只能识别第一个
二十三、Flex流式部局
二十四、进度条
二十五、CSS3文字描边
二十六、去掉ios默认给input加上的圆角
二十七、CSS3背景色渐变
二十八、CSS3内发光、外发光
二十九、IOS Webview中的h5页面上除A标签外的其他dom元素要做成可点击必需加上cursor: pointer样式
三十、魅族 Webview中的h5页面获取到的屏幕宽度不准的问题
三十一、华为自带浏览器 不支持流式布局
三十二、transition动画中用left制作动画可能会出现卡卡的不流畅
三十三、像素pixel转rem和Rem转像素pixel
三十四、CSS3 :nth-child(n) 选择器和:nth-of-type() 选择器
三十五、IOS webview高度不准确把h5底部截掉/IOS APP webview中的h5页面中的fixed在底部的dom元素显示不全或者被截掉不显示问题。
三十六、兼容微信音频播放。
三十七、相邻带背景图的两个元素,用负数margin会出现背景叠加。
三十八、background-size设为100% auto时repeat背景在部分华为手机没效问题。
三十九、弹框里的滚动条滚动时,外部body也跟着滚动的问题。
四十、Rem单位设置的小圆圈在安卓手机上不圆的问题。
四十一、在ios的webview中使用fixed在顶部的内容导致下拉刷新被阻挡问题
四十二、web中弹出弹框后,要求滚动弹框内容时,背景元素不能滚动,关闭弹框后要求背景元素位置保持不变解决方案
四十三、overflow:auto及overflow:scroll的区别
四十四、H5,CSS3,js动画FPS(帧频)要达到60才不会感觉到卡
四十五、如何使用HSL(H,S,L)来设置颜色?
四十六、pointer-events,一个神奇的css属性
四十七、CSS3属性-webkit-font-smoothing字体抗锯齿渲染
四十八、white-space 属性设置按内容的空白及换行原样显示
四十九、数字badge由圆圈到圆角椭圆自动伸长技巧
五十、移动端h5页面必须重置的样式及meta设置
五十一、指定SVG元素path的渲染模式:shape-rendering
五十二、解决ios下的微信打开的页面背景音乐无法自动播放
五十三、iphoneX安全区域问题
五十四、flex-wrap: wrap相对较旧版本手机自带浏览器不换行问题如何解决?
五十五、段落缩进及字间间距样式:text-indent及letter-space
五十六、flex布局子元素在低版本安卓机上justify-content:space-between失效问题
五十七、如何解决移动端hover的问题?
五十八、写向上滚动动画时使用伪元素用作渐变透明遮罩图层时会出现底边闪烁问题
五十九、给tbody设置transform属性导致thead的z-index 无效问题?
六十、web font-size选择,web设计稿宽度通用选择
六十一、iPhoneX适配问题
六十二、ios的input属性disabled有默认样式问题,主要是透明度问题
六十三、新版微信安卓版7.0.6前端布局要注意的新问题
六十四、select、input[type=number]隐藏PC浏览器右边默认操作按钮
六十五、微信H5页面强制清除缓存设置
六十六、href 的令一种写法
六十七、如何查看一个URL是否命中CDN缓存
六十八、网页适配 iPhoneX
六十九、CSS3 width:fit-content 属性把内容包裹

继续阅读

D3.js使用过程中的常见问题(D3版本D3V4)

目录

一、学习D3我必须要学习好SVG矢量图码?
二、如何理解D3给Dom节点绑定数据时的Update、Enter和Exit模式
三、D3绑定数据时用datum与data有什么不一样?
四、SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高
五、D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作
六、如何给path设置缓动?

七、D3普通的缓动动画
八、给节点添加title,鼠标mouseover显示普通提示文本效果
九、getBBox按长方形获取节点的大小、长宽及坐标等等信息
十、使用遮罩制作动画
十一、D3常用的SVG元素类型有哪些?
十二、D3对svg元素设备位置一般有两种方式,使用坐标x、y或者使用transform来设置。
十三、数据可视化(不限D3)于要了解的一些基础概念
十四、笛卡尔坐标绘图适合制作普通线状、柱状等图;极坐标绘图适合制作螺旋形图表

继续阅读

React使用过程中常见问题

目录

一、减小输入字符数
二、用props.children来引用位于前置标签和后置标签之间的内容
三、创建组件两条主要的途径
四、JSX属性采用驼峰式的大小写规则(即‘onClick’而非‘onclick’)
五、JSX只能渲染单一个根节点
六、JSX中不方便使用条件语句的解决方法
七、如何在JSX内部渲染HTML标签
八、列表子元素添加key可以提升virtual dom的子级校正(reconciliation)的速度
九、JSX内联样式采用驼峰式大小写规则,以保持和DOM属性一致
十、高阶组件的主要作用
十一、为什么要用immutable.js?十二、window.fetch的浏览器兼容补丁 whatwg-fetch
十三、js ES6新函数的兼容浏览器垫片, babel-polyfill
十四、Redux-Thunk的作用是改造store.dispatch函数,让其可以接收函数进行分发,函数可带上(dispatch,getState)两参数进行传递
十五、如何编写redux自定义middleware中间件
十六、FSA(Flux Standard Action)结构的Action
十七、redux-saga的redux-saga/effects常用的指令
十八、redux使用过程中常用的lodash函数
十九、redux常用的驼峰化处理库humps
二十、redux常用的json格式化处理库normalizr
二十一、react中常用到的新的js函数
二十二、react中如何阻止事件冒泡
二十三、Create React App中的代码切割,Code Splitting in Create React App
二十四、React组件生命周期
二十五、setState注意事项
二十六、mobx在ReactJS项目中的运用
二十七、报Error: Plugin/Preset files are not allowed to export objects, only functions.错误的解决方案

继续阅读

使用原生/wepy框架开发小程序常见问题[微信小程序、支付宝小程序]

目录

一、样式中如何使用background-image呢?
二、使用自适应单位rpx类似于rem,布局尽量使用flex布局
三、万能的{{双大括号,用于在模版中输出变量
四、你想要的基础组件和API,微信的mina框架和通用API都给你准备好了
五、使用wepy框架,这里没有click,只有tap,longpress和touchend等等
六、使用wepy框架全局的东西都可以丢到app.wpy中,如globalData
七、异步更新数据后记得调用this.$apply()更新视图
八、使用wepy框架时,绑定类似tap的原生事件函数都要放到methods里面,其他的放外面
九、版本低的微信常见的一些兼容性问题
十、this.$nextTick用法与Vue类似
十一、小程序是有常驻缓存机制,要善于调用生命周期函数处理
十二、onShareAppMessage中的success与fail已失效,但可以追踪定义分享后的点击
十三、CSS3动画可以大胆使用,如animate.css动画库
十四、要考虑网络异常情况的处理
十五、wx.login登录取得code然后给后端去跟微信请求获得openid和uniqeId
十六、在Wepy中,使用npm安装外部依赖包有坑,处理较为麻烦,可把原码全部引入处理
十七、微信开发工具使用过程中常见问题
十八、小程序路由支持层数有限。因此,要善用navigateTo,redirectTo,reLaunch和navigateBack
十九、小程序分享图片设置的问题
二十、小程序弹出层解决滚动穿透问题,与web端的类似
二十一、设置好网络异常处理
二十二、设置元素显隐一般的方式
二十三、小程序发包提审时审核时间过长问题
二十四、wepy中配置css autoprefix
二十五、url图片无法清除缓存问题
二十六、小程序的scroll-view纵向滚动要设一个固定高度的样式如height:100px才能生效,如何实现自适应高度?
二十七、借助调用 wx.login() 获取 临时登录凭证code 来进行人机识别及接口防刷
二十八、手写输入法输入后如果不点选中文字,oninput取到的值不全,会缺失;可以通过onblur取到的值补全
二十九、自定义组件的显示与隐藏一般方式
三十、小程序背景图片的使用问题
三十一、支付宝小程序布局样式编写优先使用less来进行预处理
三十二、支付宝小程序页面布局时写错标签会出现什么奇葩情况?
三十三、使用Wepy编写的组件,引用时参数中传函数时,函数中的this指向组件本身
三十四、wepy的页面中mixins定义onShareAppMessage无效问题
三十五、wepy中缺少模板过滤器的解决方式
三十六、微信小程序wx.showToast()与wx.hideLoading()同时使用的bug
三十七、小程序上传非图片文件功能比较尴尬
三十八、 体验版小程序和正式版小程序的缓存数据会混在一起
三十九、 input 框 bindinput 赋值更新状态 opentype 类型的 button 视图有可能会更新失败
四十、 微信小程序 实现网络图片本地缓存

继续阅读

Vue2.x 使用过程中常见问题

目录

一、vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发
二、vue用splice删除多维数组元素导致视图更新失败情况
三、vue项目如何部署到php或者java环境的服务器?
四、vue-router各种路由及跳转
五、vue-router如何取参?
六、vue中如何深度watch?
七、vue生命周期及所有东西
八、vue-router路由拦截中间件
九、axios请求拦截中间件处理
十、autoprefixer版本设置不能使用默认,browsers: [‘last 2 versions’]
十一、设置反向代理来调用开发环境的接口实现跨域
十二、scoped CSS样式对子组件无效问题
十三、路由鉴权逻辑
十四、如何修改Vue打包之后的文件路径为相对路径?
十五、在Vue中使用全局变量或者全局挂载
十六、旧系统手机及低版浏览器出现白屏问题的解决
十七、在vue的template里面使用style动态设置图片背景问题
十八、当配置vue项目打包出来的css/js文件不带版本号时,如何解决缓存问题?
十九、路由页面不变参数变化情况,页面状态不更新问题
二十、Vue中配置反向代理使用localhost:8080时报[HPM] Error occurred while trying to proxy request,请求时报504错误
二十一、Vue中node-sass突然使用不了,报…Run `npm rebuild node-sass` to build the binding…等错误
二十二、Vue发包上线cache control控制文件缓存策略问题,特别是index.html文件
二十三、document.activeElement.scrollIntoViewIfNeeded()解决iphone输入框移位或者vue keep-alive页面后退白屏问题
二十四、使用babel-polyfill解决旧版手机白屏或者PC浏览器兼容问题
二十五、使用computed的get,set可实时反向更改源数据
二十六、在页面上如何调用组件内的函数?
二十七、在Vue中如何突破模版限制递归渲染类树结构视图内容?
二十八、vue-router路由拦截的写法坑
二十九、移动端ios8的坑,路由前页面没有滚到顶部,路由后的页面使用了fixed内容且宽为100%时,宽度会超过750px/10rem,导致布局错乱
三十、axios请求formData的方式
三十一、vue动态设置raw html的方式
三十二、组件内部的点击事件触发dom结构重画或者重流时,导致android微信浏览器崩溃问题
三十三、Vue中子组件如何向父组件传递事件?
三十四、Vuex中的mutations操作后视图不更新问题
三十五、ios系统$router.go(-1)后退后页面图片不渲染问题
三十六、Vue内页中引入相对路径build时,其实是相对于index.html这文件的路径
三十七、Vue中使用canvas画布画图要注意的问题
三十八、Element-UI日历date-picker组件在IE下的首次渲染初始值失败问题
三十九、Vue中使用css3组合动画要注意vdom的重新渲染问题
四十、axios怎么获取到error中的response响应数据
四十一、element-ui的table表格控件表头与内容列不对齐问题
四十二、axios下载excel文件(blob二进制方式/arraybuffer方式)
四十三、如何创建一个支持v-model的组件
四十四、dev或者打包时报TypeError: Cannot assign to read only property ‘exports’ of object ‘#<Object>’错误
四十五、组件外部传入prop数据改变,响应处理的方式
四十六、cors跨域请求,重复提交问题
四十七、vue中 . native 修饰符的使用
四十八、vue中 postcss-plugin-px2rem 按需配置 px 转 rem 及 如果设置过滤某部分样式不转
四十九、vue中 /?aa=xx&bb=xxx#/cc 在某些 APP 内置浏览器中跳转 /cc 失败,使用 qs 取值 bb 的值为 'xxx#/cc'
五十、@import 后面的波浪号~ 代表什么意思
五十一、基于vue-cli搭建多模块且各模块独立打包的项目
五十二、axios 的 CancelToken 取消异步请求

继续阅读