当前位置： >
移动端html5手机网站字体单位font-size选择px还是rem
09:24　来源/作者：懒人模板　分类：　
移动端html5手机网站字体单位font-size选择px还是rem
分为两种情况：
①对于只需要适配手机设备，使用px就可以了
②对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rem参考代码：
html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
& & html {
& & & & font-size: 15px
@media screen and (min-width:640px) and (max-width:719px) {
& & html {
& & & & font-size: 20px
@media screen and (min-width:720px) and (max-width:749px) {
& & html {
& & & & font-size: 22.5px
@media screen and (min-width:750px) and (max-width:799px) {
& & html {
& & & & font-size: 23.5px
@media screen and (min-width:800px) and (max-width:959px) {
& & html {
& & & & font-size: 25px
@media screen and (min-width:960px) and (max-width:1079px) {
& & html {
& & & & font-size: 30px
@media screen and (min-width:1080px) {
& & html {
& & & & font-size: 32px
* 懒人模板承诺：本站所有资源免费下载，无病毒，无弹窗，无干扰链接！
猜你也喜欢看这些 ??????
我们一直在进步
日 懒人模板官网论坛上线！
日 微信贺卡源码频道上线！
日 手机单页专题频道上线！
微信游戏源码频道上线！
05年3月10日 手机单页专题频道上线！
10月18日 懒人模板手机版正式上线！
8月21日 关键词“wap模板”首页排名前一！
8月17日 关键词“手机模板”首页排名前四！
08月12日 关键词“手机wap网站模板”首页排名第一！豆丁微信公众号
君，已阅读到文档的结尾了呢~~
这两年来移动互联网大热，自己也在做相关产品的研发和设计，有许多朋友会问我APP怎么开发？html5页面怎么做？于是就萌生了做一个APP入门教程的想法，特别适合于不会编程的朋友，可以一步一步循序渐进地学习（更新中）
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
零基础自学ios/android/html5 app开发经典教程之第十七课:html5页面如何自适应各手机尺寸屏幕？
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口任何问题留言、发私信等我是没有时间看的，请看个人资料加我QQ。
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寸，为什么屏幕宽度一样尺寸缺不一样大呢，这个就去看手机尺寸的定义，原来是手机屏幕变高了，所以对角线长度变长，所以手机尺寸变大了。
那么手机屏幕宽度怎么知道是多宽多高呢？
有人说了，我来拿尺子量一下。。。。
不错，懂得动脑了
可惜不是你想的那样，你拿尺子量得到的只是手机物理尺寸，毕竟你得到的单位是毫米，我们做网页需要的是像素或者点。
下面教大家一个简单的办法来获得手机屏幕的宽度：
我们可以写一个网页，网页里用脚本弹出当前手机屏幕的宽度。
&测试手机屏幕宽度&
function showWindowWidth(){
alert(window.innerHeight "，" +window.innerWidth);
onload="showWindowWidth();"&&
将页面发布一下，这样用手机访问就可以得到手机的屏幕宽度和高度了。
这时候又有人说了，那我岂不是要找很多的手机来测试？
好吧，对于你这样的小白，我只好把我为了测试买的苹果4、苹果5、苹果6、苹果7、苹果8拿出来给你测试了（(^__^) 嘻嘻……，装了个B，我可没买那么多手机，恩…我也就买了4啊5s啊7P啊，好了不吹了）
神器上场，谷歌浏览器。
额，当然不止谷歌浏览器了，现在大部分浏览器都支持开发者调试模式，按F12就可以打开，其中就有手机调试模式，里面已经为大家设定了大部分手机宽度和高度的型号手机，你只需要去选择就可以知道各类手机的屏幕宽度和高度了。
好了上面说了一大堆，不知道你现在知道怎么开发手机H5自适应网页了吗？
不知道，OK，那是因为你还不知道手机屏幕分辨率是什么，下面继续。
手机屏幕分辨率：其实所有手机画面都是由一个点一个点组成，这一个个小点我们称之为像素，像素的单位是px。分辨率分为宽高，比如电脑的屏幕分辨率px，px。还有手机的常见分辨率960x640，px。
这个时候大家又要问了，我怎么知道我的手机是多少分辨率的啊？
噗~~，先让我吐口血~！
好了，下面正式回答一下这个问题：
想知道自己的手机，那就比较简单，直接在屏幕主页，进行屏幕截屏（如果连这个你也不会，那么我也是没辙了，你换我下面的方案吧），然后进入相册，找到截屏的图片，查看详细，里面会有尺寸，这个尺寸就是你的手机分辨率，比如我的是最新款的vivo x20全面屏手机，分辨率就是 px（嘿嘿，不小心又装了B，喷我的肯定是买苹果X的）。
那我想找其他类型的手机是什么分辨率咋办呢？
额，那我也只能说，你去百度吧，想找那个找哪个。
关键词：xx手机分辨率
算了，看在你们已经不厌其烦的读到这里，那么我还是奉上我为大家百度好的各类手机分辨率吧。
屏幕分辨率
320pt*480pt
640px*960px
320pt*480pt
640px*960px
320pt*568pt
640px*1136px
320pt*480pt
640px*1136px
375pt*667pt
750px*1334px
375pt*667pt
750px*1334px
1200万像素
iphone6 plus
417pt*736pt
750px*1334px
iphone6s plus
417pt*736pt
750px*1334px
1200万像素
360pt*640pt
720px*1280px
1300万像素
320pt*420pt
240px*320px
320pt*480pt
320px*480px
360pt*500pt
480px*800px
320pt*480pt
640px*960px
360pt*640pt
540px*960px
360pt*640pt
720px*1280px
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: 30
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的定义：
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个小时了，为大家找资料还是很不容易的。。。
没有更多推荐了，如何让网页自适应手机屏幕分辨率
[问题点数：40分，结帖人u]
本版专家分：0
结帖率 100%
CSDN今日推荐
本版专家分：107
本版专家分：1440
本版专家分：315
本版专家分：1440
本版专家分：157
本版专家分：12
本版专家分：6024
2015年9月 移动开发大版内专家分月排行榜第一
本版专家分：606
本版专家分：938
本版专家分：53
本版专家分：8
本版专家分：3
本版专家分：48
本版专家分：498
本版专家分：697
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐android适配各种分辨率的问题_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
android适配各种分辨率的问题
总评分0.0|
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩1页未读，
定制HR最喜欢的简历
你可能喜欢}