H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？
一、问题汇总
- 手机网页怎么制作？
- 怎么让网页适应不同手机屏幕？
- 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*480pt | 640px*960px | 500万像素 |
| iPhone4s | 3.5英寸 | 320pt*480pt | 640px*960px | 700万像素 |
| iPhone5 | 4.0英寸 | 320pt*568pt | 640px*1136px | 800万像素 |
| iPhone5s | 4.0英寸 | 320pt*480pt | 640px*1136px | 800万像素 |
| iphone6 | 4.7英寸 | 375pt*667pt | 750px*1334px | 800万像素 |
| iphone6s | 4.7英寸 | 375pt*667pt | 750px*1334px | 1200万像素 |
| iphone6 plus | 5.5英寸 | 417pt*736pt | 750px*1334px | 800万像素 |
| iphone6s plus | 5.5英寸 | 417pt*736pt | 750px*1334px | 1200万像素 |
| vivo x5 | 5.0英寸 | 360pt*640pt | 720px*1280px | 1300万像素 |
| android | 320pt*420pt | 240px*320px | ||
| android | 320pt*480pt | 320px*480px | ||
| android | 360pt*500pt | 480px*800px | ||
| android | 320pt*480pt | 640px*960px | ||
| android | 360pt*640pt | 540px*960px | ||
| android | 360pt*640pt | 720px*1280px | ||
| android | 360pt*640pt | 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版本的写法。
$(window).bind('resize load', function() {
$("body").css("zoom", $(window).width() / 640);
$("body").css("display", "block");
$("body").css("zoom", $(window).width() / 640);
});注意:这里面的数字640，就是你UI设计图片的宽度或者说是你网页的宽度。
当然光写这一个脚本是不够的
我们还需要改一下meta标签中对viewport的定义：
<meta name="viewport" content="width=640, maximum-scale=1.0, user-scalable=no"/>好吧，细心的你可能也发现了，
我们队width设置了固定值640，没错这个也是UI设计图片的宽度。
到此，你已经学会了最简单的一种网页自适应了。
就是这么简单。
3.2 使用initial-scale定义初始化缩放值
这个方法和使用zoom缩放有着异曲同工之处，主要就是对页面进行缩放，UI设计请直接参考3.1.1，开发请参考3.1.2。
3.2.1 缩放方法
有空再写，今天写了3个小时了，为大家找资料还是很不容易的。。。