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); }将页面发布一下，这样用手机访问就可以得到手机的屏幕宽度和高度了。 这时候又有人说了，那我岂不是要找很多的手机来测试？ 好吧，对于你这样的小白，我只好把我为了测试买的苹果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手机分辨率 算了，看在你们已经不厌其烦的读到这里，那么我还是奉上我为大家百度好的各类手机分辨率吧。 手机型号手机尺寸屏幕大小屏幕分辨率后摄像头iPhone43.5英寸320pt*480pt640px*960px500万像素iPhone4s3.5英寸320pt*480pt640px*960px700万像素iPhone54.0英寸320pt*568pt640px*1136px800万像素iPhone5s4.0英寸320pt*480pt640px*1136px800万像素iphone64.7英寸375pt*667pt750px*1334px800万像素iphone6s4.7英寸375pt*667pt750px*1334px1200万像素iphone6 plus5.5英寸417pt*736pt750px*1334px800万像素iphone6s plus5.5英寸417pt*736pt750px*1334px1200万像素vivo x55.0英寸360pt*640pt720px*1280px1300万像素android320pt*420pt240px*320pxandroid320pt*480pt320px*480pxandroid360pt*500pt480px*800pxandroid320pt*480pt640px*960pxandroid360pt*640pt540px*960pxandroid360pt*640pt720px*1280pxandroid360pt*640pt1080px*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的定义： 好吧，细心的你可能也发现了， 我们队width设置了固定值640，没错这个也是UI设计图片的宽度。 到此，你已经学会了最简单的一种网页自适应了。 就是这么简单。 3.2 使用initial-scale定义初始化缩放值这个方法和使用zoom缩放有着异曲同工之处，主要就是对页面进行缩放，UI设计请直接参考3.1.1，开发请参考3.1.2。 3.2.1 缩放方法有空再写，今天写了3个小时了，为大家找资料还是很不容易的。。。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |