响应式 - 前端技术分享

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

文章指路：https://www.alistapart.com/articles/responsive-web-design/

名词解释:

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

一篇较好的文章指路：http://beforweb.com/node/6/page/0/2

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

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

手机版应用分为三类：

WebApp（html5技术；又叫wap版；全平台通用）
NativeApp （android、ios专用开发平台，安装在手机上）
HybridApp （nativeapp+webapp）

comment:谁能想到后来到小程序呢，引流情况下的首选场景
comment:hybrid的模式总归是会存在的

Webapp手机网页特点：

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

<!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查询语句：

常用写法：

.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初始化，在手机版基础上增加如下内容：

.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

动画减弱检测

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

flex

flexible box
flex container | flex item
场景
小程序开发
（View）容器默认宽度100%，高度自适应
主轴｜交叉轴
flex-direction: row | column | row-reverse | column-reverse
justify-content: center | space-between平均分布 | space-around等距分布

名词解释:

手机版应用分为三类：

Webapp手机网页特点：

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

响应式页面制作

@mediascreen查询语句：

动画减弱检测

flex

场景

display：inline-flex 会消除容器的块状属性