目前做的都是复杂的web应用,其实不太会有响应式的需求,如果有要对端的支持,权衡成本收益,对投入端的开发,对开发的组件包的设计,具体的可能会做一些适配,大屏,中屏,小屏。

名词解释:

  • portrait-横屏
  • landscape-竖屏
  • flexible layout-弹性布局

下面是以前实习时候,所里的一次小培训,让服务提供商讲的,天气很热,不太好吃的食堂,记的乱乱的笔记
comment: 现在看来不太具有参考意义了,但是能看出前端发展的进程

  • 名词:自适应、响应式
  • 手机版WebAPP页面制作

手机版应用分为三类:

  • WebApp(html5技术;又叫wap版;全平台通用)
  • NativeApp (android、ios专用开发平台,安装在手机上)
  • HybridApp (nativeapp+webapp)
  • comment:谁能想到后来到小程序呢,引流情况下的首选场景
  • comment:hybrid的模式总归是会存在的

Webapp手机网页特点:

  • Html5按照横向320倍率等比放大页面全部元素,声明及页面信息如下:

    1
    2
    3
    4
    5
    6
    7
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>无标题文档</title>
    </head>
    Iphone的放大倍率:
    4-4s 326dpi (2x) 640 x 960  16:11接近4:3   2倍
    5-5s 326dpi (2x) 640 x 1136   16:9   2倍
    6 326dpi 750 x 1334   16:9   约2.3倍
    6plus 401dpi 1080 x 1920   16:9   约3.4倍
    
  • 要做成宽度自适应页面,考虑手机横屏问题。

  • 设计师在设计时为了保证图片的清晰度会设计640px甚至更高分辨率的页面,制作时切图按照设计师提供的分辨率切图片,写html是将图片高度换算成320px,对于背景是重复显示还是拉伸根据图片情况而定,会用到css3的background-size属性。

  • Js交互要符合手机操作方式 swiper3.0 (http://www.swiper.com.cn/)

  • 手机字体使用px,请根据设计分辨率换算成基准320分辨率下的字号,行距一般为字号的两倍。

  • comment:iphone已经11pro了,swiper已经6.0了( https://swiperjs.com/)
  • comment:hybrid的模式总归是会存在的
  • comment:手机屏幕的尺寸也有了变革,也多了刘海儿

手机版CSS3全局样式初始化:

1
2
3
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border: 0;} a,area{blr:expression(this.onFocus=this.blur())} a { text-decoration:none;} a:hover { text-decoration:none;} html, body { font-family:Helvetica,"微软雅黑"; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none; } /*Reset Android and IOS font*/ input { border-radius:0; } /*Reset IOS input style*/ div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form { list-style:none; } @-webkit-viewport { width:device-width; } @-moz-viewport { width:device-width; } @-ms-viewport { width:device-width; } @-o-viewport { width:device-width; } @viewport { width:device-width; } .boxcenter { margin:0 auto;} .fl_all { float:left; display:inline-block } .fr_all { float:right; display:inline-block }
</pre>
  • comment:其实是不推荐这种的,对样式的初始化,会造成之后的一些问题,这种全局的覆盖样式,如果自己写了组件包,包的表现形态会收到影响

响应式页面制作

Html5页面 + 手机版meta页面信息声明 + CSS3(兼容性问题,IE7-8可通过第三方插件兼容响应式)

  • comment:ie的问题现在除了特殊的行业和需要支持的场景,一般不再需要考虑了,有趣的是,一个做直播的朋友,PC端的,说其实他们还是需要支持IE,想到了乡土中国这本书,很有意思。

@mediascreen查询语句:

  • 常用写法:
1
2
3
4
5
6
7
8
9
.container { max-width:1200px; min-width:980px; }
.fl_pc { float:left; display:inline-block }
.fr_pc { float:right; display:inline-block }
.col_2in1 { width:50%; *width:49.9% }
.col_3in1 { width:33.3% }
body{ background:#fff; } /*正常 白色 */
@media screen and (max-width:992px){ body{ background:red; } } /*高度小于992px时 红色 */
@media screen and (min-width: 768px) and (max-width: 991px){ body{ background:black; } } /*高度大于768px小于991时 黑色 */
@media (max-width:767px) and (orientation: landscape){body{ background:green; } } /*高度小于767px且为竖屏时 绿色 适用于pad竖屏查询*/ 注意从上至下顺序,越往下优先级越高!
  • CSS3初始化,在手机版基础上增加如下内容:
    1
    2
    3
    4
    5
    .col_4in1 { width:25%; *width:24.9% }
    .col_5in1 { width:20%; *width:19.9% }
    .col_6in1 { width:16.6% } .pchide { display:none; } .mhide { display:block; }
    /* screen 992 */
    @media screen and (max-width:992px){ .container { max-width:990px; min-width:300px; padding:0; } .fl_pc { float:none; display:block } .fr_pc { float:none; display:block } .col_2in1 { width:auto; *width:auto } .col_3in1 { width:auto } .col_4in1 { width:auto; *width:auto } .col_5in1 { width:auto; *width:auto } .col_6in1 { width:auto } .pchide { display:block; } .mhide { display:none; } }
  • 由手机清晰度引发的兼容性问题,ie8以下对css3不兼容:
    1
    background-size  解决办法,避免使用背景或使用@media hack: @media \0screen\,screen\9 { @media screen and (max-width:992px){   .....   } }
  • ie8以下对响应式不兼容: a. 必须写在所有样式表的下边,才能生效!
    b. 必须放到web服务器上才能生效。
  • respond.js(https://github.com/scottjehl/Respond/)
  • comment: 14年基本上就停止更新了,后面做了两次patch