前端二倍图的思考（涉及Retina）

【前端二倍图的思考（涉及Retina）】的更多相关文章

前端二倍图的思考（涉及Retina）

EXCELL格式 1 csv格式导出来之后不能用EXCELL打开,会乱码.用记事本打开,然后将"(英文的引号出掉),就可以了. 关于二倍图的操作概念: 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下显示分辨率一定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰. 高分辨率屏幕:在 Windows 系统下,提高屏幕分辨率一般都是通过提高屏幕尺寸.而随着…

Retina 屏幕与二倍图

分辨率屏幕分辨率:指屏幕可显示的像素的个数图像分辨率:位图图像包含的像素的个数对于 Retina 屏它的分辨率是传统屏的两倍,而屏幕大小没有变化,所以它需要的图片的分辨率应该是传统屏幕的两倍(甚至多倍),显示时按传统屏的大小显示,不然就会因为图像分辨率不够造成显示模糊. 像素 CSS 像素:px(css pixel) 设备无关像素:DIPs(Device-independent pixel) 一个 CSS 像素对应一个设备无关像素.但对于 Retina 屏它的一个设备无关像素会包含两倍(甚…

如何在普清的屏上调试CSS样式二倍图背景

背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是虚的. 环境:mackbook pro retina屏现象: 给了一个截图图标是虚的 BUG修复要求: 对图标进行修正,使在retina屏上图标依旧是清晰的. 分析: 到这里,做过移动端页面的都知道,这是没有双倍图呀. 修复方法: 第一步,让设计师出对应图标的双倍图第二步,使用css的medi…

iphone关于单倍图和二倍图（导航背景变高）

同学们and朋友们大家好!今天我想说一下关于@2x二倍图的知识,以我所知所见所闻来讲述我的理解! 别看关于这么点小知识,有很多初学者在这个上面常会犯错误,以下是我的理解: 用二倍图是为了适配iphone4以上的设备(所谓的retina屏),如果你的项目要适配3gs,那么你要备两套图,一套是一倍图,比如image.png(320*480),另一套是二倍图,比如image@2x.png(640*960).当然你在用的时候,比如UIImage *image = [UIImage imageNamed:…

对WEB前端的几段思考（一）——界面设计和性能优化（整理中）

尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员,能够创作出协调和谐的界面,和熟悉前后台交互一样重要. 为控制成本,在网站素材(婚纱摄影图片和网站文字)未准备好时,网站上都是些测试数据,不堪入目.因此我的处女作暂且还没投入使用,实为一大遗憾.在网站投入使用之后,必定附上网址,让大家一睹为快. 一,色彩的联想每种色彩带给用户不同的心理感受,因此,…

移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = "viewport" content = “ width = device-width,user-scalable = no,initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0” width:宽度设置的是 viewpor…

用一篇文章了解ppi,dpr,物理像素，逻辑像素，以及二倍图

这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素密度,ppi是逻辑像素密度) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了.量的单位可不是cm,而是英寸.1英寸= 2.54cm,这个相信看过<新华字典>或<现代汉语词典>的人都知道,上面附有计量单位表. 嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两…

腾讯IVWEB前端工程化工具feflow思考与实践

本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使项目创建.开发.构建.规范检查到最终项目上线的整个过程更加自动化和标准化. 要解决的问题项目的目录结构按约定生成团队有一套开发规范进行约束支持多种类型的构建,包括Fis构建和webpack构建团队内部的代码贡献统计.离线包内置App等为了解决上述问题,我们于17年2月底开始投入工程化fef…

OnlineJudgeFE之前端二次开发

之前我们在这篇文章青岛大学开源OJ平台搭建讲了关于它的安装和部署. 今天我们讨论如何对其进行二次开发.首先谈谈前端的二次开发. 如果想要对青岛大学的OJ项目进行二次开发,目前我觉得要满足这么几个要求? 第一.前端使用的是Vue.js,你需要对Vue.js毕竟熟悉: 第二.nodejs和webpack你最好也要熟悉,因为部署环境需要和打包的时候也需要: Vue.js和Node.js教程你可以参考如下网址: Vue.js:https://cn.vuejs.org/ Node.js:https://…

项目需求会__前端er定位的思考~

一.页面展示-----针对前端部分:后台的东西(功能.样式)不考虑! 二.动态效果------能不能实现! 三.接口数据------怎么传数据! 四.兼容性--------兼容到哪个版本浏览器! 五.工期----------结合已有项目.项目难易.联调时间估算!…

前端DDD总结与思考

软件开发架构演化与DDD起源单体服务架构:大概10年前,我在武汉工作的时候,甲方客户购买我们的产品,一般都是连着设备一起购买,一套软件系统,一台惠普或者戴尔的企业级服务器,再加一个黑色的铁盒,销售部可以卖小几百万左右.外加每年维护费用,这就是一个非常典型的单体服务开发.运作的方式. SOA服务化.微服务架构:前端开发同学普遍离业务域结构比较远,一般比较难真正意义上去理解服务化与微服务,我个人对微服务和SOA区别的理解,SOA服务化,往往侧重某一类具体业务场景下功能的实现,它必须有一个明确的业务…

前端二：CSS

CSS: 一:介绍:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言.让HTML和XML看起来更加美观. 语法:<style>标签内定义css样式.内容是{key:value}形式. css位置: 为了提高样式的重用.css样式一般推荐在html <head>标签的位置以及单独文件引用(head里的<link>标签). <head>标签内只能是当前html文件引用,而文件引用可以被多个文件引用…

我的前端故事----关于前端数据&逻辑的思考

最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步: 拆分组件逻辑处理抽象.聚合数据组件化这是一个老生常谈的问题了,从16年起前端除了构建工具,讨论的最多的就是组件化了,把视图按照一定规则切分为若干模块过程就是组件化,那么组件化的重点就是那个规则. 那么这个规则又是什么呢…

qduoj前端二次开发简略流程

为缩减篇幅,已略去nodejs.git等软件安装操作,若有疑问请搜索相关教程. 为区分win和ubuntu的命令,作如下约定: $ cd //以$标记win下命令 # cd //以#标记linux命令环境:win10,qduoj前端github:https://github.com/QingdaoU/OnlineJudgeFE 1.下载源码并解压,或用git拉取源码: $ git clone https://github.com/QingdaoU/OnlineJudgeFE.git 2.安装依…

前端(二)：css样式

本节笔记根据css中文手册整理,内容已做成思维导图.下载地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip. css(Csacading Style Sheet)级联样式表,是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.也就是说,css的作用基本有两个:1.将样式定义从html中独立出来,更方便地设置样式:2.给标记的对象(html元素)设置样式,所以必须要先有对象. 语法: Selector {property:…

qduoj~前端~二次开发

青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker.安装环境是Ubuntu14-64bit 1.安装一大堆软件 sudo apt-get update sudo apt-get install git vim wget sudo apt-get install redis-server sudo apt-get install postgresql #openssl是…

关于AngularJS与其他前端框架混合使用的思考

AngularJS 是一个为动态WEB应用设计的结构框架,拥有双向数据绑定,模板,MVVM,依赖注入,指令5大优点,Angular最有诱惑力的就是数据绑定功能,使用MVC模式进行开发,Angular在数据显示和处理方便有着比传统JS框架不可取代的优点. 但是当我们的项目中需要使用漂亮的插件的时候,我们使用的往往是Juery插件和类Jquery框架(easyui,extjs)等等,这个时候我们需要混用多种框架,但是往往会存在不兼容和报错的各种问题,所以必须明确以下几点: 1.在AngularJS …

关于前端数据&逻辑的思考

最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步: 拆分组件逻辑处理抽象.聚合数据组件化这是一个老生常谈的问题了,从16年起前端除了构建工具,讨论的最多的就是组件化了,把视图按照一定规则切分为若干模块过程就是组件化,那么组件化的重点就是那个规则. 那么这个规则又是什么呢…

Blazor带我重玩前端(二)

概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版VS2019. 小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究,所以本系列文章只会对Server-Side模式做简要说明. WebAssembly WebAssembly模式(也可叫做Client-Side模式),WebAssembly前文已经说了很多了,本文不再做额外讨…

angularjs + seajs构建Web Form前端(二)

回顾上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使ng手动启动.我会尽量把自己在学习当中遇到的问题以及如何解决分享给各位,如果大家有什么疑问或者想要达到的功能可以告诉我,我可以尝试去把效果做出来然后再下一篇文章分享给各位. 需要解决的问题 1.实现ajax form 2.构建菜单实现ajax form 首先给$scope定义一个formData的对…

一道CVTE前端二面笔试题

题目:给你一个数组,输出数组中出现次数第n多的数字; 比如:[1,1,1,2,2,2,3,3,4,4,5,5,6,6,7]; 1---3次 2---3次 3---2次 4---2次 5---2次 6---2次 7---1次假设要求输出第1多的:1,2 第3多:7 有兴趣的,可以做一做,我给出我的解法: function findNPlace(arr,n){ var o={}; for(var i=0,len=arr.length;i<len;i++){ if(!o[arr[i]]) o[arr…

前端可视化项目流程，涉及three.js（webGL）,3DMax技术，持续更新

最近在做一个可视化展示的项目,记录一下流程: 建模,模型来源,可以参考沙盘展示类项目,自己建模或者拼装其他源模型(本人以前是3D建模师,可以应付一些简单的场景) 有效模型导入到web端,这里采用的obj,mtl的组合格式使用Three.js创建场景和模型的编辑--3DMax技术实现数据与模型的交互,位置可以是API,实时状态可以soket通信项目链接地址:Visualization 蛋糕盘旋转效果.透视: 特写: 实际项目运用: 可视化前缀:htmlpreview.github.io/?…

css媒体查询来书写二倍图三倍图设置

@media (-webkit-min-device-pixel-ratio: 2){} @media (-webkit-min-device-pixel-ratio: 3){}…

springboot+vue+element：echarts开发遇见问题---vue前端(二)

<template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class="u-grid-tools" slot="tools"> <el-button @click="exportExcel">导出</el-button> </div> <div class="app-m…

Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系统的默认浏览器!!!一想到国内Win7用户的可观数量,简直男默女泪.对于普通用户,360安全浏览器的知名度和使用量都大大高于Chrome,而360浏览器的兼容模式(Win7系统下),大部分就是IE8版本的内核. 怎么办?当然是硬着头皮凉拌呗.有一个问题是,使用Win8.Win10.Mac.Linux…

谈Web前端安全编码

最近开发中涉及到有关输出正确的HTML标签这样的问题,正好对字符编码这块儿多看看,之前对这个方面认识的不深,思考的确实不够,如果下次再碰见类似的问题,若再次不少时间去调研的花,就得不偿失了. 就像正则表达式一样,似乎你知道它,但是每一次开发都需要现取查.现取测试,估计你会像我一样,每一次都会花些意想不到的时间. 总之,重在学习. 有一篇文章,这个博友已经总结的非常到位了,引入于此,看到的同学,希望可以多看看他做的总结: 在web的开发的开发过程中,前端总是在处理后端打的各种变量,变量可以包含着中…