front-end►css

Live App页面布局

一些知识

屏幕宽高比

  • 主流安卓720p手机 720/1280=0.5625
  • 主流安卓1080p手机 1080/1920=0.5625
  • 主流安卓1440p手机 1440/2560=0.5625
  • iPhone5 640/1136≈0.56
  • iPhone6 750/1334≈0.56
  • iPhone6P 1242/2208≈0.56 (实际运行分辨1080p)

查看更多

iPhone 的状态栏(信号电量栏)高度:40px

iPhone 微信的返回栏高度88px

  • 微信浏览器可视高度
    • iphone5 1136-40-88=1008px
    • iphone4 960-40-88=832px

关于dppx

dpr(Device Pixel Ratio 设备像素比)

上面所说的px是设备像素(Device Pixels),对于我们在web开发中接触到的是css 像素(CSS Pixel),retina屏幕出现以后,设备像素和css像素不再是1:1的关系.各厂家和平台通常会通过一个比值dpr将分辨率转换为一个较为便于开发的像素.打个比方说,iPhone5的设备像素是640x1136,它的dpr是2,所以在web页面的css计算中需要将640x1136除以2,按320x568计算

dppx: Number of dots per px unit. (每像素包含点的数量)

dppx在数值上等于dpr

查看更多设备的dppx

dpi

题外话,dpi是设备分辨率(Device Pixels)和设备物理尺寸(单位:英寸)之间的比值,跟我们web前端开发没有一毛钱关系,我们不要理它.

此分隔线以下所有内容均指css像素,不再讨论设备像素

极端宽高比

  • iPhone4 在微信浏览器中 320x416
  • iphone5 在safari桌面快捷方式中(无地址栏) 320x548


一些案例

有道云笔记 乱入学霸の世界

链接

  • 布局方式:流式布局
  • 向下兼容:主体部分高度不变

416
528

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
1
2
3
4
5
6
7
8
if(client_height<540 && client_height>500) {
    $('body').addClass('hehe_screen');
}
if(client_height<420) {
    $('body').addClass('very_low_screen');
} else if(client_height<500){
    $('body').addClass('low_screen');
}
1
2
3
.very_low_screen .q_0_container {
    margin-top: -150px;
}

淘宝网|万能时装屋

链接

  • 纯图片素材,无文字,无表单
  • 布局方式:采用百分比绝对定位
  • 向下兼容:尽量保持主要区域可见.可以看见对于高度极端不足的iphone4屏幕实际上是舍弃了(东西点不到)
  • 整个页面未写height属性,所有background-image容器均使用padding-bottom撑出高度

416
528

1
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
1
2
3
4
5
6
html, body {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
1
2
3
4
5
6
7
8
.sprue {
  position: absolute;
  left: 18.06%;
  top: .2%;
  width: 82.28%;
  padding-bottom: 156.25%;
  background-size: cover;
}

(淘宝)男人爱车 没玩没了

链接

  • 纯图片
  • 固定宽度640
  • 定位:按像素绝对定位
  • 向下兼容:主要内容都在画面上半部分,下面的截掉了就截掉了无所谓
1
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

416
528

(京东)京东618 全民红包摇摇摇

链接

  • 图片+文字
  • rem
  • 向下兼容: 超出部分有内容则出滚动条,除此之外也是放任截掉
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

416
528

416
528

京东微信购物礼包

链接

  • 高度不固定
  • 流式布局
  • rem

计算<html>标签font-size的算法

1
2
3
4
5
6
7
8
9
10
!function(){
    var cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/320;
    if(cw>640)zoom=2;
    document.write('<style id="htmlzoom">html{font-size:'+(zoom*50)+'px;}</style>');
    window.addEventListener('resize',function(){
        cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/320;
        if(cw>640)zoom=2;
        document.getElementById('htmlzoom').innerHTML='html{font-size:'+(zoom*50)+'px;}';
    });
}();

京东微信购物1周年

链接

  • 绝对定位(像素)
  • 向下兼容:缩放
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
1
2
3
element.style {
	zoom: 0.693333333333333;
}

416
528

总结

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 强制页面全宽
  2. (设计)主要内容尽量放在页面靠上部分,至少兼容iPhone4s
  3. 流式布局用rem体验最佳
  4. 全图片页面可以考虑所有元素绝对定位
front-end

两分钟重装sublime text 2

sublime text 虽好,却无奈会时不时会崩溃掉(频率 < 2次/年),而又只能手动安装、配置插件.故将符合本人使用习惯的版本还原方法在此备份如下:

1.

打开 Sublime Text 2，按下 Control + ` 调出 Console，通常这个快捷键会与PC上的其它软件起冲突，需要修改其它软件的这个快捷键。

2.

将以下代码粘贴进命令行中并回车：

1
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

3.

重启 Sublime Text 2，如果在 Preferences -> Package Settings中见到Package Control这一项，就说明安装成功了。

4.

comond+shift+p → pci → Flatland

5.

preference → setting-user :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
     "color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
     "default_line_ending": "unix",
     "ensure_newline_at_eof_on_save": true,
     "font_face": "courier new",
     "font_size": 15.0,
     "highlight_line": true,
     "ignored_packages":
     [
          "Vintage",
          "jQuery Mobile Snippets"
     ],
     "scroll_past_end": false,
     "tab_size": 4,
     "theme": "Flatland Dark.sublime-theme",
     "trim_trailing_white_space_on_save": true,
     "word_wrap": true
}

6.

preference → key bindings-user :

1
2
3
[
	{"keys": ["super+alt+l"], "command": "reindent" , "args": {"single_line": false}}
]

7.

comond+shift+p → pci :
emmet
ejs
less
juery
Prefixr
sublimeCodeIntel
Bracket Highlighter
markdown preview

8.

拷贝备份的.sublime-snippet到 :
/Users/userName/Library/Application Support/Sublime Text 2/Packages/User

front-end

apache配置备忘

举个栗子:

1
2
3
4
5
6
<Directory "/Users/HeXing/Sites">
    Options Indexes FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

配置目录/Users/HeXing/Sites,如果你的文件根目录里有 index.html，浏览器就会显示 index.html的内容，如果没有 index.html，浏览器就会显示文件根目录的目录列表，目录列表包括文件根目录下的文件和子目录。要禁止 Apache 显示目录结构列表，只需将 Option 中的 Indexes 去掉即可。

AllowOverride

在 AllowOverride 设置为 None 时， .htaccess 文件将被完全忽略。当此指令设置为 All 时，所有具有 “.htaccess” 作用域的指令都允许出现在 .htaccess 文件中。从安全性考虑，根目录的AllowOverride属性一般都配置成不允许任何Override,即AllowOverride None.

AllowOverride的参数：

AuthConfig 允许使用与认证授权相关的指令(AuthDBMGroupFile, AuthDBMUserFile, AuthGroupFile, AuthName, AuthType, AuthUserFile, Require等)。
FileInfo 允许使用控制文档类型的指令(DefaultType, ErrorDocument, ForceType, LanguagePriority, SetHandler, SetInputFilter, SetOutputFilter, mod_mime中的 Add 和 Remove 指令等等)、控制文档元数据的指令(Header, RequestHeader, SetEnvIf, SetEnvIfNoCase, BrowserMatch, CookieExpires, CookieDomain, CookieStyle, CookieTracking, CookieName)、mod_rewrite中的指令(RewriteEngine, RewriteOptions, RewriteBase, RewriteCond, RewriteRule)和mod_actions中的Action指令。

Indexes 允许使用控制目录索引的指令(AddDescription, AddIcon, AddIconByEncoding, AddIconByType, DefaultIcon, DirectoryIndex, FancyIndexing, HeaderName, IndexIgnore, IndexOptions, ReadmeName, 等)。

Limit 允许使用控制主机访问的指令(Allow, Deny, Order)。Options[=Option,…] 允许使用控制指定目录功能的指令(Options和XBitHack)。可以在等号后面附加一个逗号分隔的(无空格的)Options选项列表，用来控制允许Options指令使用哪些选项。

Order Allow Deny

via Fwolf’s Blog
Allow和Deny可以用于apache的conf文件或者.htaccess文件中（配合Directory, Location, Files等），用来控制目录和文件的访问授权。

所以，最常用的是：

1
2
Order Deny,Allow
Allow from All

注意“Deny,Allow”中间只有一个逗号，也只能有一个逗号，有空格都会出错；单词的大小写不限。上面设定的含义是先设定“先检查禁止设定，没有禁止的全部允许”，而第二句没有Deny，也就是没有禁止访问的设定，直接就是允许所有访问了。这个主要是用来确保或者覆盖上级目录的设置，开放所有内容的访问权。

按照上面的解释，下面的设定是无条件禁止访问：

1
2
Order Allow,Deny
Deny from All

如果要禁止部分内容的访问，其他的全部开放：

1
2
Order Deny,Allow
Deny from ip1 ip2

或者

1
2
3
Order Allow,Deny
Allow from all
Deny from ip1 ip2

apache会按照order决定最后使用哪一条规则，比如上面的第二种方式，虽然第二句allow允许了访问，但由于在order中allow不是最后规则，因此还需要看有没有deny规则，于是到了第三句，符合ip1和ip2的访问就被禁止了。注意，order决定的“最后”规则非常重要，下面是两个错误的例子和改正方式：

1
2
3
Order Deny,Allow
Allow from all
Deny from domain.org

错误：想禁止来自domain.org的访问，但是deny不是最后规则，apache在处理到第二句allow的时候就已经匹配成功，根本就不会去看第三句。 解决方法：Order Allow,Deny，后面两句不动，即可。

1
2
3
Order Allow,Deny
Allow from ip1
Deny from all

错误：想只允许来自ip1的访问，但是，虽然第二句中设定了allow规则，由于order中deny在后，所以会以第三句deny为准，而第三句的范围中又明显包含了ip1（all include ip1），所以所有的访问都被禁止了。 解决方法一：直接去掉第三句。 解决方法二：

1
2
3
Order Deny,Allow
Deny from all
Allow from ip1

front-end►mac

OS X 不能使用127.0.0.2的解决方法

原因

FreeBSD (also OS X, and I believe NetBSD & OpenBSD) will respond to requests sent to configuredaddresses on the loopback interface, just as they would for addresses on any other interface – If you want an answer you need to assign the address first:

1
mgraziano@monitor ~]$ ifconfig lo0
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> metric 0 mtu 16384
    options=3<RXCSUM,TXCSUM>
    inet6 fe80::1%lo0 prefixlen 64 scopeid 0x3
    inet6 ::1 prefixlen 128
    inet 127.0.0.1 netmask 0xff000000
    nd6 options=3<PERFORMNUD,ACCEPT_RTADV>

[mgraziano@monitor ~]$ ping 127.1.1.1
PING 127.1.1.1 (127.1.1.1): 56 data bytes
ping: sendto: Can't assign requested address
^C

[mgraziano@monitor ~]$ sudo ifconfig lo0 alias 127.1.1.1 netmask 0xFFFFFFFF

[mgraziano@monitor ~]$ ifconfig lo0
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> metric 0 mtu 16384
    options=3<RXCSUM,TXCSUM>
    inet6 fe80::1%lo0 prefixlen 64 scopeid 0x3
    inet6 ::1 prefixlen 128
    inet 127.0.0.1 netmask 0xff000000
    inet 127.1.1.1 netmask 0xffffffff
    nd6 options=3<PERFORMNUD,ACCEPT_RTADV>

[mgraziano@monitor ~]$ ping 127.1.1.1
PING 127.1.1.1 (127.1.1.1): 56 data bytes
64 bytes from 127.1.1.1: icmp_seq=0 ttl=64 time=0.020 ms
^C

解决

1
$ sudo ifconfig lo0 alias 127.0.0.2 netmask 0xFFFFFFFF

via serverfault.com

front-end►css

关于css position:fixed和transform的一点研究

先摘抄w3school对position:fixed和transform:translate()的定义:

position:fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

理论上来说style为position:fixed的元素,不管他的父、子、兄弟元素如何变化,他的位置相对于屏幕可视区域的位置都是不会变化的.但是在实际操作中却发现并非如此,如下是一个简单的demo:

DEMO:


查看源码 on runjs.cn

Dom结构如下:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <body>
        <div id="wrap">
            <div id="fixed">
            </div>
        </div>
    </body>
</html>

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#wrap{
    width: 300px;
    height: 300px;
}
#wrap.transformed{
    transform: rotate(15deg) translate(12px, 20px);
}
#fixed{
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
}

两个按钮:

作用分别是给#wrap添加和去除transform属性.

1
2
3
4
5
6
7
$("#addtBtn").on("click",function(){
    $("#wrap").addClass("transformed");
})

$("#removeBtn").on("click",function(){
    $("#wrap").removeClass("transformed");
})

很容易发现,当设置为position: fixed的元素的父元素有transform属性时,子元素不再“相对于浏览器窗口进行定位”,而是变为相对于有transform属性的父元素定位,以w3c给出的定义来看,这应该是一个bug.

小结:

transform作为css3的主要属性,他的值其实更像是一个个方法.打个比方来说,如果说css2的属性都是”静态”的属性,浏览器在渲染页面的时候,css渲染引擎是先将这些静态的样式渲染出来,再来计算css3的那些”方法”.也就是说,transform属性是后产生作用.反映出的现象就是transform优先更高,甚至高于position: fixed.

以上是我的一点粗陋的推想,请斧正,谢谢.

coding.net是个好东东

前几天发现有个垃圾站的域名是xxx.coding.net,当时还闪了一下怎么垃圾站的域名都这么高大上了.也没多长个心眼去看看顶级域名是什么情况.

直到昨天上班遇到一个需求,把一个php做的demo放到外网,我去找免费php空间的时候又一次搜到了这个神奇的网站.

经过我近一天的使用,感觉coding.net是想做成中国的github,同样可以建立远程git库,可以clone别人的git库,可以fork…等等等等.但是这货比github强在它的演示空间居然提供php环境(github.io只提供静态空间)!只需要简单的把本地的工程push到云端,配置好数据库,再切换到演示面板,点击部署就不用管了..实测访问速度超过某些号称高速的vps(服务器在国内就是好).

coding.net演示界面截图

coding.net不支持github.io的自动部署,每次push代码之后需要手动点一下一键部署.

目前coding.net还不支持绑定域名,只能用它提供的二级域名.估计以后也不会提供绑定域名吧,那样的话建站蝗虫大军就该找它了.

顺便放上最近做的一个项目的前端demo




fork me on coding.net.

Over