前端还原设计图常遇到的几个坑

1.问题:一张背景图,适应大小不一的设备,而且不出现滚动条,图片不会变形。

解决方法:body{background-size:cover}就可以搞定。

2.问题:背景图显示在页面上非常大,或非常小,显得页面很不好看。

解决方法:元素{background-size:80%(自己可以调,超过100%放大图) auto},背景图不会变形。

时间: 2024-10-12 08:15:13

前端还原设计图常遇到的几个坑的相关文章

使用阿里云的oss服务在前端进行文件上传踩过的坑

直接在前端使用阿里云的oss服务向oss上传文件有现成的js写的sdk 项目地址:https://github.com/aliyun-UED/aliyun-sdk-js 使用js上传的example地址:https://github.com/aliyun-UED/oss-js-upload 使用上面的example中的例子做好相关的配置后可以直接进行文件的上传操作,但是当文件的上传大小超过切片大小时,会对改文件进行切片上传操作,这个时候,文件总是在上传成功后进行文件的拼接操作时失败,这个时候注意

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记

在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Laravel Mix的放弃 在 Laravel 中,前端工作流默认是由 laravel-mix 包驱动的,集成了 Vue.js.而作为核心开发之一,也负责前端这块的开发.其实,这是seven第一次写 Vue,之前都是用 React 做开发. 然后seven和另一个核心成员 Wayne 在楼道抽烟聊前端这事情,要不要用

前端开发在uc浏览器上遇到的坑

关于uc 的flex 和textarea 的width:100%: 这些天再做一个wap的项目,本想着手机上不用考虑兼容性问题,可以大刀阔斧搞,fuck ie678! 在pc上完成页面开发,在chrome模拟器上做页面的矫,good!一切看起来都是很美好的样子~~ 打开手机测试页面,想想都有点小激动呢!扫码,..........卧槽,啥浏览器这是!卧槽,这是uc吗! 尼玛,居然我的一个最简单页面都不能正常显示,毕竟只是只有两个textarea的页面啊,我擦,这都能出错!??@@... 检查了代码

说说前端开发中的SEO

SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操作起来复杂的技术,只可意会,不可言传.作为一名前端工程师,不需要精通SEO,但必须要了解它.SEO有一条不变的准则就是它永远都在变,因为没有一沉不变的优化方案可供大家套用.但我们仍然可以发现一些基础的或是被人们公认的规律来进行网站的SEO.更重要的是我们要有自己的实践,不断发现适合自己行之有效的SE

前端标注工具标你妹啊与马克鳗小对比

前端标注设计图的工具我用的并不多,刚开始搬砖的时候就是个啥也不知道的囧·雪诺,看公司里的前辈用的是qq截图,有时候直接打开PSD文件.作为一个数字记忆盲[行数255我可以转眼记错跳转到522],让我记住这种瞬间的数据我实在做不到. 知乎一下后我发现了马克鳗这个神器,英文名Mark Man,官网http://www.getmarkman.com/.对于收费这个事情国内人才辈出你懂得,不过最好支持一下正版啦. 用马克鳗也差不多一年了,说说它的优势:打开设计图速度快,可以标记宽高坐标以及颜色,支持多种

liveapp场景应用,给前端工程师的一些建议

liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿就是按照640px来做 布局方式: 流式布局,百分比布局和rem. 目前我用过的主要是这rem和流式布局 流式布局: 网页的主要架构部分按照百分比布局,宽度百分比,高度定死: 如果是图片宽度设置百分比,高度根据图片的比例自适应,如果是封面图片可以高度定死,用background-size:cover

前端系列——jquery前端国际化解决方案“填坑日记”

前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl 但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初

前端一年有余

很久没写文章了,因为最近进入了一个职业雾区,突然的就不知道以后的方向了. 做前端一年有余了(这个时候应该写一篇如何一年从小白到大神之路的分享),但是,我还是一名渣渣!5555.从一名小白变成一名渣渣. 我也是蛮拼的. 在互联网盛行的现在,前端也迅速发展的现在,前端被各种需要,但是我却不知道怎么样才能成为一个合格的,优秀的前端攻城师. 前端需要掌握的技能太多太多了,作为一名前端,我深刻的知道,学习是不能停止的,面对各种未知的新技能,迷茫了,从哪里下手,怎么下手,下不下手..我被困住了. 这段时间的

iOS移动前端开发总结

iOS移动前端也可以说是iPhone移动前端,做过才知道有一些坑,记录下来,以便下次不会遗忘,希望这篇文章能够帮到正在做iPhone手机移动前端的你.当然有一些内容也适用在Android上,如果你发现有错误的地方或者有更好的技巧,欢迎留言告知我. 一:输入框点击之后页面会放大 iPhone的一个坑,当你的页面有表单,需要填写内容时,聚焦后,发现页面会放大,这可能导致一些设计变形,例如超出内容出现横向滚动条. 解决方案:很简单,不让用户放大页面的操作,添加以下的meta即可. <meta name