今天进行网页设计学习时,CSS代码设计width:300px,但实际显示像素如下图所示为199.99px. 最后发现是浏览器运用了缩放,恢复100%的缩放后,像素显示为整数.

家都知道,在Android项目当中,drawable文件夹都是用来放置图片资源的,不管是jpg.png.还是9.png,都可以放在这里.除此之外,还有像selector这样的xml文件也是可以放在drawable文件夹下面的. 但是如果你现在使用Android Studio来新建一个项目,你会发现有如下的目录结构: 嗯?怎么会有这么多mipmap开头的文件夹,而且它们的命名规则和drawable文件夹很相似,也是hdpi.mdpi.xhdpi等等,并且里面还真是放的图片,难道Android项目中

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源的,不管是jpg.png.还是9.png,都可以放在这里.除此之外,还有像selector这样的xml文件也是可以放在drawable文件夹下面的. 但是如果你现在使用Android Studio来新建一个项目,你会发现有如下的目录结构: 对于刚刚从Eclipse转向Android Studio的开

设计稿转为xaml后,设计师开始review UI了,发现图片都模糊了. 这一张很神奇,三个图片都是同一张,中间的那个最清楚,上面的这个左右两边清楚,下面的那个四个边都不清楚. 这一张,右边是原图,左边是模糊的图,同比放大的. 于是开始查原因: 1. 检查图片,png, DPI=72,Stretch="None",原图尺寸和xaml里面写的尺寸一致.如果替换为大尺寸的原图,使用时,size写的小一点,同比例缩小,没问题. 2. 第一反应是像素对齐,SnapsToDevicePixels

手机屏幕分辨率的问题,导致h5的1像素看起来比较粗,网上找了一个办法,记下来 主要就是通过scale来缩小宽度 .line1px{     border: none;     border-bottom: 1px solid #e1e3e5;     height: 1px;     transform: scaleY(0.5);     transform-origin: 0 0;     -webkit-transform: scaleY(0.5);     -webkit-transfor

最近工作任务主要是移动端内嵌H5页面,一次与原生进行像素交互下,发现了这个天坑,再次做个记录

H5开发基础之像素.分辨率.DPI.PPI  html5  阅读约 4 分钟 ​2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小点显示不同的颜色来形成图像,我们把每个小点称为一个像素 (pixel). 概念点: 1. Dot:物理属性的一个点,打印机或屏幕通过这些点把图片print出来.一块屏幕的Dot的点是固定的.对于一台具体的显示器,多个点(dots)排列起来之后,构成的一个整体的宽度和高度,我们称之为显示器的"物理尺寸

自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 图1 图2 实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现.通过transform: scale(0.5)实现.本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难.圆角阴影失效问题.缺点嘛,这方法适全新

场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞ 阿树:~(>_<)~毛问题噶啦~ 阿树:哇靠,为啥你给的设计稿是640px宽 ,iPhone 5不是320px宽吗??? 玉凤:A pixel is not a pixel is not a pixel, you know ? 阿树:(#‵′),I know Google... 为什么会出现以上的情况,难道他们当中一位出错了,摆了这样的

首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips 好了,到了这里有出来了两个概念,物理像素 和  dips 物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调

##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好.自信.谦虚.善于沟通.表达. ü  喜欢追究原理 5.2 面试内容 1.2.1简历上的项目 ü  介绍下你的项目吧? 1)        第一步:介绍你项目是干嘛的 2)        第二步:介绍下你负责的是哪块 3)        第三步:介绍下里面都有什么功能,你是怎么实现的,怎么分层的? 1

基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(device independent pixels),也可以称为设备无关的逻辑像素 meta里面设置width=device-width,这个device-width就是设备独立像素 在chrome里 看到的ip6为375667,ip4为320480等等都是设备独立像素,它们在数值上与css数值是相等的

1.需要在mainfest.json plus对象里添加 "statusbar": { "immersed": "true", "style":"dark" } 2.新建immersed.js 注意 在里边不适用plus,因为plus.ready之后再js改变样式 必然造成页面闪烁跳动 (function(w){ document.addEventListener('plusready',function(

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v

在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面中,并通过JavaScript控制相关视图的显示和隐藏,这种模式可以让用户在Web App感受Native App的速度和流畅.本篇文章的目的就是教你如何来快速的构建一个H5单页面切换骨架. 一. 页面设计 在构建SPA应用时,首先要确定你的应用需要包含

以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与在PS中打入的字非常接近,毫无违和感. 前面一段时间也在研读JavaScript设计模式相关的知识,这次正好小小的实践一下,但对设计模式的理解还不是很深. 一.项目总览    总共就两张页面,第一张是选择性别,输入名字,第二张页面是合成文字,并展示出来. 虽然页面很简单,但在做这个项目的时候,涉及到了很多方面

一.项目简介 1.1.项目背景:这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮. 1.2.系统要求:ios6-ios7.android3.0-android4.3.android4.4+(非webview内) 1.3.体验地址: 二.初步技术方案确定 在项目前期首先启动了技术预演,确定初步技术方案(*非最终解决方案): 2.1.获取用户照片数据2.1.1.首先放弃了主动获取用户摄像头的getUserMed

在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作--预览旋转合成> 这次有时间就实现一个功能稍微多点的海报. 一.概要 第一屏 第二屏 第三屏 总共有三屏,第一屏是选择图片,第二屏是合成图片,第三屏是显示结果图,可保存分享朋友圈. 页面内容不是很多,分析起来也比较简单. 1)每一屏的左右边距相同,上边距各不相同. 2)屏幕内的元素,大部分是居中,有些特

[20160105更新:可以用iPhone6分辨率为视觉稿尺寸啦] 又是一年的520网络情人节,深圳这边却下了大雨,这雨只能是单身汉的泪,而对于我来说这一天具有特别的意义,一来怀念父亲,二来对我这种结婚人士来说还可勉强表达对老婆的爱,so,本文的图片宽均以520像素来设计. 回到主题,在微信朋友圈经常看到的H5页面(滑屏页面),除了炫酷的动画效果之外,细心的你会发现有些H5页面在不同的移动设备上适配效果良好,页面的元素适配你的设备屏幕,并且展示完整的信息,如下图,页面在iPhone 6和iPho

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

1.html{font-size:62.5%;}//不用font-size:10px的原因:(因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了. 用rem定义尺寸的另一个好处是更能适应缩放/浏览器设置字体尺寸等情况(因为rem相对于字体大小,会同步改变). 至于选择62.5%而非10px的原因,主要是兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,几乎无法评估以后的设