首页  关于  方案  案例  联系
菜单
电话咨询

H5网站开发新手入门-H5制作网页如何适应不同手机屏幕分辨率?

H5网站开发,H5网站制作,H5定制新手入门-H5网页如何适应不同手机屏幕分辨率?H5制作网页字体大小设置多大比较合适? H5开发网页字体大小设计规范是什么? H5定制页面字体大小如何自适应手机屏幕? 移动端H5网页字体大小font-size该用px、em还是rem?

日期:2018-11-07来源:北京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怎么自适应布局?
更多网页自适应、字体大小等问题… …
二、小白科普
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寸,为什么屏幕宽度一样尺寸缺不一样大呢,这个就去看手机尺寸的定义,原来是手机屏幕变高了,所以对角线长度变长,所以手机尺寸变大了。

那么手机屏幕宽度怎么知道是多宽多高呢? 
有人说了,我来拿尺子量一下。。。。 
不错,懂得动脑了 
可惜不是你想的那样,你拿尺子量得到的只是手机物理尺寸,毕竟你得到的单位是毫米,我们做网页需要的是像素或者点。

下面教大家一个简单的办法来获得手机屏幕的宽度: 
我们可以写一个网页,网页里用脚本弹出当前手机屏幕的宽度。
将页面发布一下,这样用手机访问就可以得到手机的屏幕宽度和高度了。 
这时候又有人说了,那我岂不是要找很多的手机来测试? 
好吧,对于你这样的小白,我只好把我为了测试买的苹果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手机分辨率 
算了,看在你们已经不厌其烦的读到这里,那么我还是奉上我为大家百度好的各类手机分辨率吧。

THANKS!
3

010-52875431 / 132-6931-9513

微信二维码