⼀、问题汇总
⼿机⽹页怎么制作?
怎么让⽹页适应不同⼿机屏幕?
H5⽹页设计到底该设计多⼤尺⼨?
rem怎么⾃适应布局?
宋佳玲H5⼀屛页⾯如何⾃适应屏幕?
viewport该怎么写?
width=device-width如何⾃适应不同⼿机屏幕的?
css3的rem单位怎么使⽤?
如何通过media媒体查询实现⽹页⾃适应屏幕?
怎么使⽤100%百分⽐做⾃适应布局?
如何使⽤js改变zoom缩放⽹页⾃适应⼿机屏幕?
如何使⽤js改变html的font-size进⾏⽹页⾃适应?
徐静蕾电影H5⽹页字体⼤⼩设置多⼤⽐较合适?
H5⽹页字体⼤⼩设计规范是什么?
H5页⾯字体⼤⼩如何⾃适应⼿机屏幕?
刘强东事件女主角移动端H5⽹页字体⼤⼩font-size该⽤px、em还是rem?
有没有前端框架可以解决⾃适应布局?
bootstrap怎么⾃适应布局?
国歌 歌词更多⽹页⾃适应、字体⼤⼩等问题… …
总结:看来⼤家遇到的移动端H5⽹页设计问题还真不少,恭喜你们终于到最好的解决⽅案了,请仔细阅读以下内容,⼀定有所收获。
⼆、⼩⽩科普
2.1 ⼿机尺⼨、屏幕⼤⼩和分辨率之间的关系
我们经常会听到的就是⼿机⼴告上说到词语,苹果⼿机6,4.7⼨、5.5⼨,还有曾经的3.5⼨,4.0⼨,当然也还有现在⽐较流⾏的全⾯屏⼿机6.0⼨,还有⼀些平板或pad尺⼨⽐如7.9⼨,9.7⼨,12.9⼨。说了这么多尺⼨,是不是⼤家有点晕了,下⾯说正题。
⼿机尺⼨:指⼿机屏幕对⾓长度,以英⼨的单位,1英⼨=25.4MM。也可以⽤尺⼦量⼀下长度多少毫⽶,然后除以25.4就是⼿机的尺⼨。
⼿机屏幕⼤⼩:这个需要跟⼤家举个例⼦说明了,最简单的⽐较就是苹果4s与苹果5s⽐,它们的⼿机屏幕宽度是⼀样的,但是苹果4s是3.5⼨,苹果5s是4.0⼨,为什么屏幕宽度⼀样尺⼨缺不⼀样⼤呢,这个就去看⼿机尺⼨的定义,原来是⼿机屏幕变⾼了,所以对⾓线长度变长,所以⼿机尺⼨变⼤了。
那么⼿机屏幕宽度怎么知道是多宽多⾼呢?
有⼈说了,我来拿尺⼦量⼀下。。。。
不错,懂得动脑了
可惜不是你想的那样,你拿尺⼦量得到的只是⼿机物理尺⼨,毕竟你得到的单位是毫⽶,我们做⽹页需要的是像素或者点。
下⾯教⼤家⼀个简单的办法来获得⼿机屏幕的宽度:
我们可以写⼀个⽹页,⽹页⾥⽤脚本弹出当前⼿机屏幕的宽度。
<html>
<head>
<title>测试⼿机屏幕宽度</title>
<script>
function showWindowWidth(){
alert(window.innerHeight "," +window.innerWidth);
}
</script>
</head>
<body onload="showWindowWidth();"></body>
</html>
将页⾯发布⼀下,这样⽤⼿机访问就可以得到⼿机的屏幕宽度和⾼度了。
这时候⼜有⼈说了,那我岂不是要很多的⼿机来测试?
好吧,对于你这样的⼩⽩,我只好把我为了测试买的苹果4、苹果5、苹果6、苹果7、苹果8拿出来给你测试了((^__^) 嘻嘻……,装了个B,我可没买那么多⼿机,恩…我也就买了4啊5s啊7P啊,好了不吹了)
神器上场,⾕歌浏览器。
额,当然不⽌⾕歌浏览器了,现在⼤部分浏览器都⽀持开发者调试模式,按F12就可以打开,其中就有⼿机调试模式,⾥⾯已经为⼤家设定了⼤部分⼿机宽度和⾼度的型号⼿机,你只需要去选择就可以知道各类⼿机的屏幕宽度和⾼度了。
最短的小年祝福语好了上⾯说了⼀⼤堆,不知道你现在知道怎么开发⼿机H5⾃适应⽹页了吗?
不知道,OK,那是因为你还不知道⼿机屏幕分辨率是什么,下⾯继续。
⼿机屏幕分辨率:其实所有⼿机画⾯都是由⼀个点⼀个点组成,这⼀个个⼩点我们称之为像素,像素的单位是px。分辨率分为宽⾼,⽐如电脑的屏幕分辨率1024*768px,1366*768px。还有⼿机的常见分辨率960x640,1136*640px。
这个时候⼤家⼜要问了,我怎么知道我的⼿机是多少分辨率的啊?
噗~~,先让我吐⼝⾎~!
好了,下⾯正式回答⼀下这个问题:
想知道⾃⼰的⼿机,那就⽐较简单,直接在屏幕主页,进⾏屏幕截屏(如果连这个你也不会,那么我也是没辙了,你换我下⾯的⽅案吧),然后进⼊相册,到截屏的图⽚,查看详细,⾥⾯会有尺⼨,这个尺⼨就是你的⼿机分辨率,⽐如我的是最新款的vivo x20全⾯屏⼿机,分辨率就是 1080*2160px(嘿嘿,不⼩⼼⼜装了B,喷我的肯定是买苹果X的)。
那我想其他类型的⼿机是什么分辨率咋办呢?
额,那我也只能说,你去百度吧,想那个哪个。
关键词:xx⼿机分辨率
算了,看在你们已经不厌其烦的读到这⾥,那么我还是奉上我为⼤家百度好的各类⼿机分辨率吧。
⼿机型号⼿机尺⼨屏幕⼤⼩屏幕分辨率后摄像头
iPhone4 3.5英⼨320pt*480pt640px*960px500万像素
iPhone4s 3.5英⼨320pt*480pt640px*960px700万像素
iPhone5 4.0英⼨320pt*568pt640px*1136px800万像素
iPhone5s 4.0英⼨320pt*480pt640px*1136px800万像素
iphone6 4.7英⼨375pt*667pt750px*1334px800万像素
iphone6s 4.7英⼨375pt*667pt750px*1334px1200万像素
iphone6 plus 5.5英⼨417pt*736pt750px*1334px800万像素
iphone6s plus 5.5英⼨417pt*736pt750px*1334px1200万像素
vivo x5 5.0英⼨360pt*640pt720px*1280px1300万像素android320pt*420pt240px*320px
android320pt*480pt320px*480px
android360pt*500pt480px*800px
android320pt*480pt640px*960px
android 360pt*640pt 540px*960px android 360pt*640pt 720px*1280px android
360pt*640pt
苹果x参数配置1080px*1920px
⼿机型号⼿机尺⼨
屏幕⼤⼩屏幕分辨率后摄像头
综上可以看出来,⽬前主流的⼿机屏幕宽度已经在360pt以上了,最低的也是320pt的。 这个屏幕宽度也就是展⽰我们⽹页时实际提供的像素点数。
也就是我们通常写在meta标签⾥width=device-width这个device-width这个值。好了,以上我们把基本的理论说了⼀下,下⾯我们给出实际项⽬中采⽤的⾃适应⽅法。
三、H5⽹页⾃适应实战
3.1 使⽤zoom 进⾏⽹页缩放
这个⽅法⽐较实⽤,对于刚⼊门写移动端H5⽹页的⼈来说是最容易的⼀种⽅式,因为这种⽅式,你不需要考虑⽤户的⼿机型号,⼿机的分辨率,⼿机的屏幕⼤⼩,你只需要按照UI设计的图原封不动的⽤⽹页写⼀遍即可,下⾯解决些⽤法及原则。
3.1.1 UI 设计⽅法
在进⾏UI设计的时候,我们采⽤⼀种固定的图⽚宽度来设计,⽤主流中的⼀款⼿机做测试即可,通常我们采⽤这种⽅式设计UI时,我们的设计尺⼨宽度定的是640px或者750px,偶尔也有720px的。
3.1.2 ⽹页开发原则
⽹页开发的时候,请按照UI提供的图⽚进⾏编写,⽐如图⽚是640px的,那么⽹页写的时候你就当⼿机屏幕是640px的写,宽度或者⾼度,图⽚上设计的是多少,你就写多少,⽂字⼤⼩是多少,你也写
多少,完全不⽤考虑其他问题,唯⼀要注意的就是你的整个⽹页必须采⽤像素px作为单位。⽐如⽂字⼤⼩font-size: 30px;
3.1.3 缩放⽅法
⽅法就是在你编写的⽹页上加载⼀段缩放脚本,脚本必须在页⾯加载完成时执⾏,下⾯给出jquery版本的写法。
注意:这⾥⾯的数字640,就是你UI设计图⽚的宽度或者说是你⽹页的宽度。 当然光写这⼀个脚本是不够的
我们还需要改⼀下meta标签中对viewport的定义:
好吧,细⼼的你可能也发现了,
我们队width设置了固定值640,没错这个也是UI设计图⽚的宽度。 到此,你已经学会了最简单的⼀种⽹页⾃适应了。 就是这么简单。
3.2 使⽤initial-scale 定义初始化缩放值
这个⽅法和使⽤zoom缩放有着异曲同⼯之处,主要就是对页⾯进⾏缩放,UI设计请直接参考3.1.1,开发请参考3.1.2。
3.2.1 缩放⽅法
有空再写,今天写了3个⼩时了,为⼤家资料还是很不容易的。。。
$(window).bind('resize load', function () {
$("body").css("zoom", $(window).width() / 640); $("body").css("display", "block");
$("body").css("zoom", $(window).width() / 640);});
<meta name ="viewport" content ="width=640, maximum-scale=1.0, user-scalable=no"/>
发布评论