高性能手机网站开发——霸道

高性能手机网站开发——霸道

科技发展的今天,一个网站要是只能在pc端屏幕上好看是远远不够的。手机、平板电脑的种类,大小是层出不穷,在人们享受着科技带来的便利之余,手机网站的开发,也就变的更加的重要了,更有赶超pc网站的趋势。

那么,手机网站开发有哪些需要注意的呢。

标签


说明:初始化页面默认效果

1、width=device-width :表示宽度是设备屏幕的宽度

2、user-scalable=no:表示用户是否可以调整缩放比例

3、initial-scale=1.0:初始的缩放比例


说明:去掉手机数字和邮箱的识别功能

ps:如果需要这个功能可以这样

高性能手机网站开发——霸道

度量单位

为了适应五花八门的手机屏幕,px的度量单位就可以先放放了,有几个新的度量单位就要好上很多。

(一)em

在设计页面的时候很多时候为了想要页面能够自适应,百分比的使用应该都不陌生而em就是类似的一种度量单位

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

由此可以看出来如果浏览器默认字体是16px的话,那么1em就相当于16px。即一个字体的大小。

有两个需要注意的地方

1、em的值不是固定不变的。它的取值是根据父级元素来确定的,如果父级元素设置字体为80%,那么1em=16*0.8px。

2、当页面元素嵌套太多的话,应为em会继承父级字体样式,则需要计算,在设计和后期维护都不是很方便,嵌套最多不要超过三层。

(二)rem

如果嵌套太多的话rem就不得不说了,rem是css3的新属性。使用rem的话只需要设定基准,和em一样,rem也是相对单位。

因为rem是相对html的,设置font-size:20px;那么1rem=20px

ps:Chrome最小的字体是12px,所以10px是无效的,进一步就取20px。

换算代码如下:

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {

html,body {

font-size: 16.875px;

}

}

@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {

html,body {

font-size: 15px;

}

}

@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {

html,body {

font-size: 12.5px;

}

}

@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {

html,body {

font-size: 11.25px;

}

}

@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {

html,body {

font-size: 10px;

}

}

@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {

html,body {

font-size: 9.375px;

}

}

@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {

html,body {

font-size: 8.4375px;

}

}

@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {

html,body {

font-size: 7.5px;

}

}

@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {

html,body {

font-size: 6.46875px;

}

}

@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {

html,body {

font-size: 6.25px;

}

}

@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {

html,body {

font-size: 5.859375px;

}

}

@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {

html,body {

font-size: 5.625px;

}

}

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {

html,body {

font-size: 5px;

}

}

@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {

html,body {

font-size: 3.75px;

}

喜欢的点赞,收藏,转化,加关注一下。

最后。。。。

。。。。。。

未完待续。。。。。

O(∩_∩)O

刘让博客,版权所有丨如未注明,均为原创丨转载请注明本文固定链接
喜欢 ()or分享