All posts by 龙生

关于适配你需要知道的—MobileWeb适配总结

开门见山,本篇将总结一下MobileWeb的适配方法,即我们常说的H5页面、手机页面、WAP页、webview页面等等。 本篇讨论的页面指专门针对手机设备设计的页面,并非兼容全设备的响应式布局。 文中提到的 device-width 指 viewport meta 标签中 width 的值,即由浏览器指定的值,常用机型对应值可参照Screen Sizes。 适配达到的效果是什么? 在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)”。 适配应关注哪些要素? 一般来说,我们需要关注的是:字体、高宽间距、图像(图标、图片)。 其中,图像相对要复杂一些,针对流量、清晰度等问题网上也有比较成熟的解决方案,比如:矢量化、字体化、image-set 等等,在此不做深入。在满足快速开发的需求下,我们使用较为偷懒的方式:利用 css 将图像限定在元素内( img 图片使用 [max-]width: 100% ,背景图像使用 background-size ),布局只针对元素进行。 另外要考虑到,设计师设计视觉稿时使用什么样的宽度,才能既满足设计自身的需求又能让前端开发方便的切图适配。 举个例子 围绕这三要素,我们用一个小例子来说明接下来要介绍的三种方案的实现方式,按 640px 标准需实现的效果如图: app.jpg 固定高度,宽度自适应 这是目前最通用的一种做法,属于自适应布局,viewport width 设置为 device-width,以较小宽度(如 320px)的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值,水平方向混合使用定值和百分比或者利用弹性布局,最终达到“当手机屏幕变化时,横向拉伸或者填充空白的效果”。图像元素根据容器情况,使用定值或者 background-size 缩放。 粗略浏览了下一些大厂的首页,像百度、腾讯、Facebook、Twitter 都是采用的这种方案。 要点: 以小宽度作为参照是因为如果布局满足了小宽度的摆放,当屏幕变宽时,简单的填充空白就可以了;而如果反过来就可能造成“挤坏了”,考虑 header 区域,左测 logo 右测横向 nav 的情况。 需要小宽度的布局,又需要大宽度的图像,这是一个矛盾点。 320px 过于窄小,不利于页面的设计;只能设计横向拉伸的元素布局,存在很多局限性。 兼容性较好。 实现比较简单,样式中的尺寸都按照视觉稿二分之一大小设置,查看效果和代码。 固定宽度,viewport 缩放 视觉稿、页面宽度、viewport width 使用统一宽度,利用浏览器自身缩放完成适配。页面样式(包括图像元素)完全按照视觉稿的尺寸,使用定值单位 (px、em)即可完成。 优点: 开发简单:缩放交给浏览器,完全按视觉稿切图。 还原精准:绝对等比例缩放,可以精准还原视觉稿(不考虑清晰度的情况下)。 测试方便:在PC端即可完成大部分测试,手机端只需酌情调整一些细节(比如图标、字体混合排列时,因为字体不同造成的对齐问题)。 存在的问题: 像素丢失:对于一些分辨率较低的手机,可能设备像素还未达到指定的 viewport 宽度,此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了,不过随着手机硬件的更新,这个问题会越来越少的。 缩放失效:某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport,需要配合 initial-scale 。 文本折行:存在于缩放失效的机型中,某些手机为了便于文本的阅读,在文本到达 viewport 边缘(非元素容器的边缘)时即进行折行,而当 viewport 宽度被修正后,浏览器并没有正确的重绘,所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。 缩放失效问题需通过 js 动态设定 initial-scale

文本折行问题可以通过 […]

龙生   08 Mar 2016
View Details

winxp正版验证(KB905474)更新怎么删除

龙生   07 Mar 2016
View Details

企业QQ弹窗代码

http://crm2.qq.com/page/portalpage/wpa.php?uin=4009991259&f=1&ty=1&aty=0&a=&from=6

龙生   07 Mar 2016
View Details

已经忘记什么时候收集的两个算法,现在分享一下

龙生   05 Mar 2016
View Details

唐山大地震当夜一只狐狸报恩救人

狐狸报恩 唐山大地震中的生命传奇(图片来源:资料图) 一位老者给我讲了一个他和动物之间的故事,说是他自己的亲身经历。 老人告诉我,在1976年以前,他是唐山某水库的管理员,经常一个人驻守在水库边的配电室里。因常常闲来无事,喜欢上了垂钓,随着垂钓技术的不断提高,他钓的鱼常常吃不了,就存养在一口大缸里。这口大缸则放在简易搭建的厨房里。 1976年初夏的某个晚上,他还没睡,就听到厨房里有动静,他抄起家伙去看个究竟。原来是一只前来偷吃鱼的野狐不小心掉进了缸里,怎么也爬不上来了。想到前几次不明就里地鱼就少了,就想弄死这只讨厌而倒霉的狐狸。当他用手电照着狐狸正欲动手时,他看到狐狸的眼里满是惊恐,甚至还有眼泪,他的心又软了……最终还是放了这只野狐。 后来,他的鱼就再没少过。他就感念狐狸这生灵通人性、有良心。更令他意想不到、感慨万端的是,大地震骤来时,这只野狐居然挽救了他的命。 1976年7月28日凌晨3时左右,熟睡中的他,被一种急促的抓挠声音和呱呱鸣叫吵醒,他听出来是那只狐狸,就起身下床打开房门——那只野狐焦躁不安地仰脸望着他,并一次次地就地兜圈子,像一个有急事的满腹话语的哑巴。他就想,可能狐狸没找到猎物,饿急了,来求援了。可是,就在他想回屋里取吃的东西给它救济时,那只狐狸忽然咬住了他的凉鞋襻,狠命地往外拉。他忽然有一种什么预感。于是,随狐狸来到院子里。就在这时,举世皆惊的7.8级的大地震轰然降临,他居住的配电室瞬间即被震塌…… 直到现在,年迈的老人还念念不忘那只被他放生、又来救他的狐狸,感慨万端地说:“地球就是个大家庭,动物与人类息息相关,它们尽管不会言语,却也有着同样的思维、灵性和良心……” 它们不是为人类提供衣服的,人类没有理由屠戮它们(图片来源:资料图) from:http://fo.ifeng.com/a/20160304/41558505_0.shtml

龙生   05 Mar 2016
View Details

关于CSS3的box-sizing

以前写padding都要从宽高里送去相应的值,今天看京东手机版网页,发现了box-sizing:border-box;,加上之后就不用再减去相应的值了,因为填充已经到边框里面了。 定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 默认值: content-box 继承性: no 版本: CSS3 JavaScript 语法: object.style.boxSizing="border-box"

龙生   04 Mar 2016
View Details

.NET/android/java/iOS AES通用加密解密

移动端越来越火了,我们在开发过程中,总会碰到要和移动端打交道的场景,比如.NET和android或者iOS的打交道。为了让数据交互更安全,我们需要对数据进行加密传输。今天研究了一下,把几种语言的加密都实践了一遍,实现了.NET,java(android),iOS都同一套的加密算法,下面就分享给大家。 AES加密有多种算法模式,下面提供两套模式的可用源码。 加密方式: 先将文本AES加密 返回Base64转码 解密方式: 将数据进行Base64解码 进行AES解密 一、CBC(Cipher Block Chaining,加密块链)模式 是一种循环模式,前一个分组的密文和当前分组的明文异或操作后再加密,这样做的目的是增强破解难度. 密钥 密钥偏移量 java/adroid加密AESOperator类:

.NET AES加密解密:

iOS源码,请下载源码,源码里有包含。 java,.net,iOS,android通用AES加密解密源码:AES_CBC_ECB_android_java_ios_net通用模式 二、ECB(Electronic Code Book,电子密码本)模式 是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。 只需要提供密码即可。 iOS,android,java已调通源码:AES_CBC_ECB_android_java_ios_net通用模式 AES在线加解密验证工具: http://www.seacha.com/tools/aes.html from:http://www.cnblogs.com/jys509/p/4768120.html

龙生   04 Mar 2016
View Details

svn服务器端回退版本

由于误操作,不小心将错误的代码提交到了svn上,于是想在服务器上撤销本次提交,经过尝试,发现进行以下步骤的操作即可彻底删除本次提交: 1.首先找到本次提交后生成的版本号,例如为r224. 2.登录到svn服务器上,进入到项目的svn目录. 3.进入db目录,删除此目录下的rep-cache.db。并修改此目录下的current文件,将其修改为上一个版本,例如233. 4.删除db/revs/0/目录下的224文件。 5.删除db/revprops/0/目录下的224文件。 至此,服务器端已经回退到r223版本,此时可以将本地下载到的代码删除,重新从svn服务器上下载一份代码,然后基于此代码继续修改提交。 如果在windows下使用TortoiseSVN,还需要删除本地的缓存,不然会出现再次提交后,其日志显示出现错误的情况,删除方法为点击TortoiseSVN的settings,在选择"Saved Data",点击Clear清除Log message即可。 from:http://blog.csdn.net/zm_21/article/details/25719087

龙生   03 Mar 2016
View Details

Windows 10正式版官方原版ISO镜像下载!

UPDATE(2015.11.13): Windows 10 TH2 11月更新正式推送后,微软发布了最新的ISO镜像下载工具,大家可使用该工具制作安装U盘/DVD光盘,同时网上也出现了ISO镜像的直接下载,均包括简体中文、英文等各种语言,需要的朋友赶紧收藏吧,可以直接替代RTM正式版了。 官方下载:Windows 10 TH2原版简体中文ISO镜像! 网络下载:Windows 10 TH2正式版官方原版镜像! 随着Windows 10升级推送开启,微软已经在官网发布了ISO镜像下载工具。大家可使用以下工具制作安装U盘/DVD。 开始之前,请确保: 1、稳定的网络连接; 2、足够的存储空间,硬盘、USB或者其它外部存储设备用于下载; 3、USB或者DVD(至少4GB空间)用于制作安装工具。 如果是首次安装,需要激活码(xxxxx-xxxxx-xxxxx-xxxxx-xxxxx),正版Win7/8.1用户可直接升级。 微软提供的下载工具包括: 1、优化的文件格式,可获得更快下载速度; 2、内建USB、DVD制作选项; 3、可转换ISO文件格式; Windows 10 ISO镜像下载工具:https://www.microsoft.com/zh-cn/software-download/windows10 update:鉴于很多用户反映微软服务器下载缓慢,我们将部分版本的ISO镜像传到了快科技的网盘,包括:64位简体中文家庭/专业版、32位简体中文家庭/专业版、64位简体中文企业版,后续版本持续更新。 欢迎大家下载: 《直接下载:Windows 10正式版官方原版镜像!》 from:http://news.mydrivers.com/1/440/440521.htm

龙生   02 Mar 2016
View Details

surfacepro系列平板重装系统详细教程

surfacepro的bios是uefi格式,常规的pe是无法进入的。因此我们必须找一个支持uef启动的pe镜像(地址:http://pan.baidu.com/s/1nt7l1H3)。下完以后先放一边,插上优盘,推荐4g以上。然后我们下载utraiso(地址:http://pan.baidu.com/s/1gd8JEM3),下载完成后打开软件。如图:选择”文件”-“打开”,找到我们刚下下载的那个pe镜像,双击确认。 2 然后再选择“启动”-“写入硬盘镜像”,如下图: 3 隐藏启动分区记得选“高端隐藏”,这样可以把pe的启动文件写入到创建的隐藏分区里面,不会误删,而且优盘可以正常存储其他内容。 4 完成以后拔出优盘,支持uefi启动的优盘就做成了。 END 方法/步骤2 1 接下来我们需要下载官方的恢复镜像(sp1:http://pan.baidu.com/s/1pJKEDDp,sp2:http://pan.baidu.com/s/1i3muWYx,sp3:http://pan.baidu.com/s/1gd1sjGB)然后后将恢复镜像解压,将sources文件夹里面的三个.swm文件单独提取出来放到一个文件夹里面。如下图: 然后下载Imagex命令行工具(http://pan.baidu.com/s/1hqGjjyk)解压以后选择安装卸载.exe,右键选择“以管理员身份运行”: 安装成功以后找到新建文件夹里面那三个.swm文件,选定其中一个,右键,选择“右键菜单二”-“合并swm”,如下图: 完成以后,新建文件夹里面会出现一个install.wim文件。 现在把优盘插入苏菲3,按音量-和开关键,等出现surface标志以后松开开关键,音量-按着不动,随后进入pe系统: 苏菲3初始系统有各类隐藏分区,这对于64g或者128g来说,隐藏分区占用了宝贵的硬盘空间,我们可以打开pe自带的diskgenius(此为普通版,可以下载专业版,http://pan.baidu.com/s/1o6zbZey),删除所有分区,保存更改。 然后选择“快速分区”分几个区按个人喜好,分区的时候记得勾选“创建新esp分区”,“对齐分区的整数倍”选择4096,然后点确定,如下图: 然后在d盘新建名为“backup”的文件夹,将install.win改名为“win8.1_pro”,放入backup文件夹里面。 然后我们返回桌面,打开”计算机”,看看是不是多出来一个97.7m的磁盘,如果没显示的话需要下载修复EFI分区工具,解压后打开“挂载eps分区”文件夹,双击运行“SHOW ESP.bat”。完成以后那个97.7m的磁盘空间应该就可以看见了。 然后我们找到pe自带的cmd,选择以管理员身份运行,下载这个dism命令文档(http://pan.baidu.com/s/1c0HDmYO),打开后复制如图那段命令,在cmd窗口粘贴,如图: 回车以后待进度到100提示完成,最后一步,打开修复EFI分区工具,选”自动修复efi分区”,打开软件,esp分区选择那个97.7m的盘符,然后点“开始修复”,选择c盘的windows目录,完成以后重启,至此安装结束。 该dism文档第二条命令是备份系统用的,系统整理完备以后,可以进pe系统后复制这条命令,系统就会自动在d盘backup文件夹创建名为“win8_pro”的镜像,会覆盖原文件,这点需要注意。 至于第三条命令,在正常系统中可以使用,功能是清理系统更新补丁后留下的陈旧备份文件,相当于垃圾清理,已管理员身份打开cmd,复制这条命令,回车即可。 附:没有备用键盘的同学,在pe里面敲不了回车的,可以下载这个虚拟键盘(http://pan.baidu.com/s/1ntyyb2L),打开即用。(注意:由于百度网盘误报文件有毒,有些压缩文件设了密码。统一为iqina) from:http://jingyan.baidu.com/article/ce09321b7d8e1e2bfe858f79.html

龙生   02 Mar 2016
View Details
1 277 278 279 420