/*dpr比值为1的css代码 */ div{ width:300px; height:200px; background:url(img/button@1x.png) ; } /* dpr比值为2的css代码 */ @media screen and (-webkit-device-pixel-ratio: 2) { div{ width:300px; height:200px; background:url(img/button@2x.png) ; } } /*dpr比值为3的css代码…

图片背景2X && 3X @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ .share_wrapper .hehe_person{ background-image: url("./images/gongzai@2x.png"); } }…

通常在iOS上开发使用的图片素材1x,2x,3x三种 下面利用python Image 库 resize函数,由一个大图,自动生成1x,2x,3x的素材照片: 1. 首先你的python环境要安装有Image库, 即PIL 没有安装的,下载源码 http://effbot.org/downloads/Imaging-1.1.7.tar.gz 安装PIL: $ .tar.gz $ cd Imaging- $ python setup.py install 2. 处理逻辑 传入照片路径,设定生成照片…

version 1.2 1.修改不用输入扩展名 2.输出路径可选.默认会在输入路径下建文件夹 前沿: 现在开发中ios,android会使用一套图,但是ui设计师给的图命名是以@1x,@2x,@3x这样命名的,android 客户端使用起来就略嫌麻烦了,这个小工具可以实现简单的分包. 原理: I/o流读取 testPicture中的@1x,@2x,@3x 文件进行整理,按序输出旧文件文字同时,需要输入一个新文件名 + 后缀名,然后动态进行分组到desPicture中的文件夹1,文件夹2,文件夹3…

物理.逻辑与位图像素的概念 关于设备物理像素和逻辑像素,这两个像素一个是实体的,一个是抽象的单位.除此之外还有一个不可忽视的像素,就是位图像素. 物理像素(设备像素):指的是设备屏幕实际拥有的像素点.一个设备生产出来,它的像素就已经确定了,iphone6的分辨率是375px * 667px. 逻辑像素(CSS像素):是我们进行CSS样式设计时的一种抽象单位,它可以自动在不同设备之间调节. 设备像素比 = 设备的物理像素 / CSS像素 如果设备像素比为2,就意味着设置的 1px CSS 像素,在…

iOS中: 备注: Retina是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.而其最初该技术是用于苹果的iPhone4上.其屏幕分辨率为960×640(每英寸像素数326ppi).这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素. 坐标系是用的是点point,而不是pixel像素 旧的iOS设备,不带retina屏幕: iPhone, iPhone3G, iPhone3GS, iPad, iPad 2, iPad mini, an…

众所周知,iOS开发中的图片资源一般需要2倍图和3倍图,也就是2x,3x,但是最近思考了一个问题,为什么不能只提供3x的图片,2x的图片让系统从3x压缩就好了,于是上网搜索了下,得到了答案. 当我们在2x的手机上只用3x的图的时候,系统会将图片相应地压缩,压缩的过程会消耗CPU或者GPU的资源,当图片非常多的时候,系统会对每张3x的图都会压缩,这样在渲染图片的时候会消耗很多额外的CPU或GPU时间,一般来说2x的手机比3x的手机性能要差(例如iPhone6会比iPhone 6 Plus性能差一些…

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&…

项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片弹出显示,并且可以手动滑动预览,直接代码如下: 需要引入jQuery(或者Zepto)swiper.min.js + swiper.min.css swiper.js下载地址:http://3.swiper.com.cn/download/index.html(实例代码使用的是swiper3) HTML:…

图片通常是移动端网页中最占流量的资源.在很多类型的网站中(比如电商.社区),图片占据了网页的大部分空间.优化图片的质量和加载速度成为提高用户体验的重要途径. 传统方案的弊端 目前有一些被广泛应用的方案,例如选择压缩比更高的图片格式.使用雪碧图.HTTP2.CDN等.5年前的一条知乎回答前端开发中,对图片的优化技巧有哪些? - 贺师俊的回答 - 知乎现在依然有效,这些方案在各大网站中仍然发挥着重要的作用. 随着移动端兴起,各种移动设备带来了丰富的机型尺寸和像素密度,逐渐暴露出以上方案共同的问题,即…

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西. 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工…

一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发   touchstart 2.手指放在屏幕上滑动式触发    touchmove 3.手指离开屏幕时触发.  touchend 4.系统取消touch事件的时候触发,比较少用.  touchcancel 二.移动端一般有三种操作:点击.滑动.拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实…

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么 问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿,在编码的时候都要除以2,    (比如设计稿上有一个图标宽高是40*40,我们需要先除以2,实际编码时候宽高要写成20*20) 之前也在网上搜过一些相关的文章,但无奈大多说的比较晦涩难懂,要嘛就是太过于深奥.也可能是我脑子不够用吧. 不过要完全理解,确实也需要相…

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西.个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工具…

本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西.个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js工具…

虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战 :同时高分辨率下pc页面信息量巨大,对于手机端用户是否需要,也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大,这种多图多信息量要求精准的页面,设计出来恐怕会是2个完全不同的版本,也许各自维护更方便.由于业务形态原因,随着用户分辨率的提高,1024x768已…

貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简单翻译一下,就是: 用简单的命令行来生成vue.js项目脚手架. <!-- 全局安装vue-cli --> npm install -g vue-cli vue-cli预先定义了5个模板,根据你使用的打包工具的不同选择不同的模板,通常我们用的都是第一个webpack模板.每个模板都预先写好了很多依…

mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-ratio & 设备纵横比 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp dem…

貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单翻译一下,就是: 用简单的命令行来生成vue.js项目脚手架. <!-- 全局安装vue-cli --> npm install -g vue-cli vue-cli预先定义了5个模板,根据你使用的打包工具的不同选择不同的模板,通常我们用的都是第一个webpack模板.每个模板都预先写好了很多依赖…

FKP-REST是一套全栈javascript框架   react服务端/客户端,同构代码心得 作者:webkixi react服务端/客户端,同构代码心得 服务端,客户端同构一套代码,大前端的梦想,为了省略重复的代码,却平添了不少烦恼,头发也白了,....,妹子还在家等我. 目录结构问题 我们引用了很多的库,在开发前端代码的时候,习惯性的我们不会考虑到node端对于库的引用,这就是开始同构最大的痛点.整个目录结构需要调整. 减少调用层级 比如说开发前端时,有一个libs的库,在react的前端…

直接看图吧. 左边是企业树,右边是依据企业变化的一个tab页 实现功能:1.我们希望假设选中的企业不变,我们在切换旁边五个tab页的时候,仅仅是第一次进去的时候请求server端.以下来回切换tab页都不请求server端(前提企业树不切换). 2. 假设选中的企业变化,对应的 右边的表结构也要跟着对应的变化. 思路.1.企业树不切换的时候,每点击一次tab 页我们给他一个标识,该标识,去推断假设企业树不变来回切换我们不请求服务端.例如以下 $("#tab-director").cli…

最近做一个抓取移动端app接口,并执行评论,收藏的接口功能测试.怎么搞/(ㄒoㄒ)/~~ 按照老思路试一试,第一步还是要用fiddler来帮忙获取接口信息! 一.基本的抓取http请求设置: 1.cmd/ipconfig获取本机ip地址 2.手机开启wifi,设置代理,服务器为:本机ip地址,端口号:8888 3.fiddler设置允许远程连接(满大街都是,自己搜) 4.打开app,点击操作,抓包! oh,shit!  竟然抓不到,什么鬼! 仔细一想我的这里基本都是https连接,无奈,百度,重…

---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hid…

第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1{ width:500px; height:500px; border:1px solid red; } </style> <script type="text/javascript"> function load (){ var oInp = document.g…

大小端系列文章https://blog.csdn.net/liming0931/article/details/100016425 MDK(Keil5,STM32F407)C语言: #include "stm32f4xx.h" int main(void) {      int u = 367328153; // 原始数据15 E4 FB 99     int* k = &u;     return 0; } 编译连接然后下载到开发板上,然后启动调试,通过监视窗口可以看到u的地…

[源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimation, DoubleAnimation, PointAnimation 关键帧动画 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationU…

EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括 百度cyberplayer, ckplayer, flowplayer, videojs, 我们重点试用了 cyberplayer 和 videojs 这两款播放器, 最终选择 videojs 作为我们的HLS 直播播放器. 从 cyberplayer 说起 百度的这款播放器很优秀,它作为HLS播放器,不需要依赖插件,做到了简单易用, 而且还在不断更新中. 我…

是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础,包括:屏幕尺寸,物理,设备独立,CSS像素,dpr,视口等相关概念,还有响应式设计基础,常见设计模式,及响应式UI实现基本思路,希望能加深对响应式的理解和实践思路. 欢迎访问我的个人博客 响应式(Responsive) 响应式是什么呢?顾名思义,响应式,肯定会自动响应,响应什么?应用程序是在终端屏幕…

摘要: 是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础,包括:屏幕尺寸,物理,设备独立,CSS像素,dpr,视口等相关概念,还有响应式设计基础,常见设计模式,及响应式UI实现基本思路,希望能加深对响应式的理解和实践思路. 响应式(Responsive) 响应式是什么呢?顾名思义,响应式,肯定会自动响应,响应什么?应用程序是在终端屏幕窗口中展示给用…

[原]SDWebImage源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 SDWebImage中主要实现了NSURLConnectionDataDelegate的以下方法: - (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response; - (void)connection:(NSURLConnection *)connecti…