近期要接盘一套老古懂的前后端不分离的 java jsp 项目，java 项目本地安装好本地环境 JDK8、eclipse、gradle。（JDK8 : https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html，Eclipse : https://www.eclipse.org/downloads/packages/，Gradle : https://gradle.org/releases/），后端帮忙配置好项目进来 Eclipse 并启动 tomcat 后然后就让我们自由发挥了。这里搞前端开发时会遇到哪些问题呢？ 继续阅读
分类：切图布局
button 设置 line-height 文本不居中问题
在移动端开发时，有时对 button 同时设置了 height 及相等的 line-height，文本会出现偏下不居中的情况。解决方案：是让其使用默认的 line-height: normal 就可以了 继续阅读
使用 vw 结合 scss / sass 超简单实现页面自适应 / 响应式布局
最近做大屏幕开发时需要把 1920px 的设计稿做成响应式布局，因为是要在同一个 Vue 项目里面同时实现移动端 + PC 端大屏幕的自适应，移动端的设计稿是 750px，大屏幕的设计稿则是 1920px，项目中默认使用了 750px 的淘宝 flexible.js的 rem 的自适应的解决方案，那么 PC 端大屏幕端呢？现需要同时实现 PC 端大屏幕端自适应。让 UI 把设计稿改为 750 是不可能的。之前就了解过 vw / vh 的自适应解决方案，但还未真正在项目中使用过， 继续阅读
使用淘宝 flexible.js / amfe-flexible.js 的 Rem 解决方案部分手机适配不了问题
使用淘宝 flexible.js / amfe-flexible.js 的 Rem 解决方案部分手机会出现适配不了问题。网上已经有了解决方案，但很多人并不知道是什么原因导致的。导致此问题的出现主要是用户的手机使用了自定义的字体，导致我们动态设置 html 根元素的 font-size 的值后，与实际的效果 font-size 值不一致。为什么呢？因为某些自定义的字体，假如你设置根元素的 font-size 为 41.4px，但其实这种字体是偏大的，结果其实际在页面上看到的效果可能是 42px。这样就会导致：假如页面屏宽为 414px ，但我们设置页面宽度为的 10rem 为 420px，页面效果就是会偏大， 继续阅读
支付宝内嵌 h5 页面前端开发常见问题
一、支付宝内 H5 页面长按 Base64 图片没反应问题（安卓端支付宝）
支付宝官方已解释，支付宝安卓客户端目前只支持 http 格式的图片这样长按保存操作， 不支持其它格式的图片，如 base64 图片格式。目前苹果 ios 暂无此问题。
详见：https://openclub.alipay.com/club/history/read/9024
二、支付宝使用 canvas drawImage 画带阴影的 png 图片，阴影会严重失真（安卓端支付宝）
前端首屏宽高设计必需了解的那些事
先导结论
PC端：
安全宽度：1002px 建议最大安全宽度：1258px 首屏安全高度：710px，对于特别需求可参考：如 jd.com 及 taobao.com，做 1400px 宽度的媒体查询（media query）超出补充处理。
字体大小（font-size）：一般设计为 12px、14px 和 16px 起步。
移动端：
设计统一按宽度 750px 宽度来设计，首屏内容安全高度：1100px，对于全面屏手机有特别需求可考虑使用媒体查询（media query）来对高度进行二次适配处理（一般不需要） 继续阅读
前端页面切图布局常见问题
目录
一、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 属性把内容包裹
