MENU

响应式网页和传统网页之间的主要区别

刚刚试着做了手机版的主题,紧接着就派上用场了,今天花费了一下午的时间,做了一个手机网站,其实,传说中的响应式网页跟手机版的页面很类似,手机页面为了适应各种屏幕大小<!--more-->,一般都会自动调节大小,响应式网页也是如此,只是响应式网页大到兼容电脑大屏幕,在一定程度上将,两者之间没有啥区别。

要说响应式页面和传统页面之间的区别,我收集总结了一下。

1、自适应主题要有明显的说明

要在网页头部加上这样的代码:

    <meta name="viewport" content="width=device-width, initial-scale=1" />

代码的意思是,网页的宽度跟屏幕的宽度相同(width=device-width),缩放比例是1,也就是不缩放(initial-scale=1)。

不过,这种一句代码的解决方案到IE就绝对行不通的节奏。如果是IE6~9,就需要使用第三方js。css3-mediaqueries.js。

    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]—>

2、宽度,一定要用百分比。

按照传统网页,网页的元素一般使用的是像素单位的,比如说 width:100px;,但是到响应式网页就不能用像素了,全都用百分比,或者直接用auto。所以编辑响应网页的时候,只要计算好比例就可以了。

3、字体大小也要用比例

字体不能再使用px这种绝对大小,而要用em这种相对大小的。
比如说

    font: normal 100% Helvetica, Arial, sans-serif;

或者

    font-size: 1.5em;

4、图片自动调整

图片的设置相对来讲比较简单了,只要将所有的图片设置成这样:

    img { max-width: 100%;}

对于IE这种顽固的家伙,只能使用这句:

    img { width: 100%; }

5、使用浮动元素

浮动元素的目的就是为了,如果宽度变窄,并列的元素会自动掉下去,避免出现水平滚动条。

    .main {
    float: right;
    width: 70%;
    }
    .leftBar {
    float: left;
    width: 25%;
    }

这就是传说中的流动布局 fluid grid

另外,还有一些相关的东西,不过我目前还没有看懂,所以就没有编写。思路上,响应式网页还是很简单的,根本没有想象中的那么复杂,看来在此之前,响应式网页和响应式主题真的把我给唬住了。无非就是将“PX”换成了“%”。


Read More

苹果,Google公司强制网站2017年前全部采用「HTTPS」

这是个老新闻,挺期待一个月后的网络世界呢~

简单解释

ATS 安全策略除浏览器类允许禁用 ATS,App 调用 Safari 进程,允许 http 方式连接后台服务器;影音多媒体应用<!--more-->,可通过 http 方式加载外,其余所有 App 都需要 HTTPS 方式连接 ATS 安全规范。这就意味着,如果您的 APP 如果仍采用 HTTP 传输,那么,在 Apple Store 中您的 APP 将不再能被用户下载使用,不要觉得这是危言耸听,如果,您还不够重视此次安全策略新规,没有部署 HTTPS 加密,那么 2017 年 1 月 1 日后,此次安全新规给您的企业带来的麻烦将是致命的。

外媒原文

Apple will require HTTPS connections for iOS apps by the end of 2016
「During a security presentation at Apple’s Worldwide Developers’ Conference, the company revealed the deadline for all apps in its App Store to switch on an important security feature called App Transport Security — January 1, 2017.
App Transport Security, or ATS, is a feature that Apple debuted in iOS 9. When ATS is enabled, it forces an app to connect to web services over an HTTPS connection rather than HTTP, which keeps user data secure while in transit by encrypting it.」

在苹果全球开发者大会上的安全性展示中, 苹果透露截止 2017.01.01, 苹果商店中的所有 app 将开启一项重要的叫 app 传输安全的项目.

“今天, 我很自豪的宣布, 2016 年末, app 传输安全将是成为 app 商店应用的必要条件”, 苹果首席安全工程师 / 设计师 Ivan Kstic 在 WWDC 峰会上说道.”这将为用户和基于网络的 app 应用沟通提供真正的安全保障.”

app 传输安全项目 (简称: ATS) 是在 iOS 9 发布后着手开展的. 当这个项目开始时, 他将强制 app 运用 HTTPS 协议而不是 HTTP. 这将是用户信息在传输时更加安全. HTTPS 中的’S’可以理解为安全的意思(secure); 你将在浏览网页的时候经常看到它; 但在手机应用中它却不能被用户直接看到 app 所使用的网络协议到底是 HTTP 或者 HTTPS;

默认从 iOS9 开始 ATS. 尽管如此, 开发者依然可以关闭 ATS, 允许 app 运用 HTTP 传输数据, 直到今年年末 (意思就是之后就不行~>_<~).

在 2016 年年末, 苹果将要求那些希望向苹果官网提供他们应用的开发者强制进行 ATS, 那些想知道何时 HTTP 将不能使用的开发者现在能够轻松点了, 现在官方已经有明确的期限了.

特别注意:

HTTPS 提升搜索排名

没上 HTTPS 的小伙伴们,你们准备怎么办呀?



Read More

中国手游中不准出现英文字母?

飞机票:中国手游中不准出现英文字母
蛤?Game over都不行?不行不行 哦那改成你挂了吧 不行不行,不健康<!--more-->
QQ登录?你QQ登录也不行啊,有QQ两个字嘛,去掉,谁让你互联了?弄个图标不就好了吗?互互互你个头。
请连接到Wi-Fi?谁让你用Wi-Fi了?改成无线局域网去。
您的Android系统未达到要求?自己改成安卓去。
啥啥啥?coin?你不会用金币两个字吗?
以后啊,你们的HP啊,全给我改成经验 什么level up啊,自己给我改成升级去
蛤,你说斗地主怎么办?简单啊,全部给我改成什么勾啊对啊
你们这些手游都不允许改成英文版啊

试想一下,这样的游戏还有谁会玩,还有谁敢玩?
虽然我一直不看好中国的手游,但你这规定,难道不是nc吗

我觉得啊,以后咱们编程都不要学什么吸嘉嘉什么劈歪的了,全学易语言算了

最好电脑也别用了。

啊对了,你的报错信息也别出现什么outofmemory啊,看一次查封一次,谁让你出现这玩意了?写内存溢出不行吗?










Read More

Chrome浏览器开启沉浸模式

今天突然看到某博客使手机chrome浏览器上方变色开启了沉浸模式,十分好奇是如何实现的,于是在知乎上进行了搜索。<!--more-->Screenshot_2016-12-14-08-30-44.png

回答中已经给出了代码,我直接在typecho的后台编辑外观在header.php文件中加入了

<meta name="theme-color" content="#448AFF">

即可直接开启全站沉浸模式

Read More