手机端网页所有内容根据屏幕大小自适应(大小,位置)

原创 2017年10月12日 11:38:00

    之前一直都在做电脑端的网页制作,几乎没有接触过手机端的页面开发,在我看来,开发手机端的页面还不如直接用安卓原生或者react-native开发,但由于公司的需求,于是我只能硬着头皮来解决。

    手机端的页面需求大多数为:自动适应不同手机的屏幕,包括平板,以往的处理方式通常都是:1.根据不同的分辨率制作不同的页面,然后通过js来处理选择显示哪个页面。2.通过媒体查询来编写多种css样式,让其自动选择。3.使用百分比。

    但这两种方式都有一个很大的缺点,无法做到完全适应所有分辨率,例如有一个按钮大小设置成100px*200px,你通过媒体查询的方式来处理低于320*568的屏幕,假设一个设备的分辨率是280*360,那就会出现一个问题,该按钮在320*568的分辨率可能是刚刚合适的,但在280*360的分辨率下,你会发现还是很大。
上面的两种方式都无法完全的动态解决,即便使用百分比的方式,也可能会出现样式的问题,这里我们引入一个CSS3的新的单位:rem,CSS3的计算方法:calc(),以及CSS3的变量:(:root),下面我简单讲解下这三个东西。

rem:rem是一个新的单位,该单位与HTML页面的fontSize有关,一般默认的浏览器的fontSize是16px,因此一般的1rem=16px。

calc():这是一个用于在CSS中计算的函数,只能进行四则运算。

:root  在css中,这是一个伪类,但现在我们所说的不是伪类,而是css中的变量,定义方法:root{ --a:#fff ;}使用方法span{color:var(--a);}
    
    有了这三样东西,我们就可以编写一个通用的适应所有屏幕的JS文件,下面通过项目来详细说明。

公司中有一个手机端网页的设计稿,如下图,尺寸是750*1334,通过chrome浏览器的调试面板,我切换到手机模式,并且选择iphone5型号的屏幕来调试,i5的分辨率是320*568,右上角的菜单按钮在设计稿中的尺寸是40*24,于是这里就有了一个设计稿尺寸和屏幕尺寸的比例,根据这个比例将其与rem强行挂钩。

JS:

	var width=document.documentElement.clientWidth;//获取屏幕的宽度
	var height=document.documentElement.clientHeight;//获取屏幕的高度
	var bili1=width/750;//屏幕宽度与设计稿宽度的比例(750是设计稿的宽度)
	var bili2=height/(1336-48);//屏幕高度与设计稿高度的比例(1336是设计稿的高度,其中48是设计稿中含有手机顶部的状态栏,需要去掉,1366-48才是真正需要显示的东西)
	var bili=bili1<bili2?bili1:bili2;//宽度的比例和高度的比例进行比较,取值最小的
	var html = document.querySelector('html');//选择html节点
  	var rem = 16;//手动设置rem与px的比例;
  	html.style.fontSize = rem + "px";//设置html的默认fontsize为16px。(注意,浏览器中最小值为12px,)
	var __bili=bili/rem;//将比例和rem进行联系。
	document.documentElement.style.setProperty('--bili', __bili+"rem");//设置css中的变量为--bili,值为__bili

CSS:

:root{
	--bili:0.027rem;	
}
.header{
	height:calc(var(--bili) * 80);
}

这里说下var __bili=bili/rem ,在我上面的设置里,1rem=16px;而设计稿按钮的宽度为40px,按照上面代码的比例320/750来算,在iphone5上的尺寸应该是:40*320/750 ,大概为17px。我们按照代码的变量来换成公式:width=relWidth*bili ==> width=relWidth*bili*rem/16  这里bili就和rem存在联系了:bili/16就是代码上的bili/rem,那么化简下就是width=rekWidth*var(--bili) relWidth是设计稿中按钮实际的宽度。在css中的引用:div{width:calc(40 * var(--bili))} 注意calc()运算符必须和数值用空格分开!

凡是涉及长度的例如padding,margin,height,width等都可以用calc(40 * var(--bili))的方式动态计算出实际的值,这样就实现了100%的自适应,电脑端的也能够自适应!


补充最后需要在<header>里添加<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">,其作用看属性就知道,用来适应手机屏幕的宽度和高度


兼容性:


设计稿:

效果图:




HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系...
  • hesi9555
  • hesi9555
  • 2017-04-14 13:54:20
  • 5924

手机H5自适应布局

手机H5自适应布局注意:rem在使用的时候是为了保留设计稿原始的设计,是针对宽度的等比例缩放(因为不同的手机设备高度不同,宽高比不是固定的),也就是说设计稿的高度height是auto不设置的,当一个...
  • qq_26291823
  • qq_26291823
  • 2016-07-13 18:53:41
  • 5926

移动页面HTML5自适应手机屏幕宽度

标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。   1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应...
  • haocm66
  • haocm66
  • 2016-07-27 23:32:31
  • 3212

网页自适应手机以及各种屏幕

  • 2014年02月07日 14:55
  • 203KB
  • 下载

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

一、问题汇总 手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi...
  • yakson
  • yakson
  • 2017-11-19 16:33:21
  • 4805

使PC端网页宽度自适应手机屏幕大小

有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机屏幕宽度: 在网页的中增加一个meta标签: 可以让网页的宽度自动...
  • lzqial1987
  • lzqial1987
  • 2016-11-26 08:05:34
  • 9837

网页宽度自动适应手机屏幕宽度的方法

在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 m...
  • yaoxiaosir
  • yaoxiaosir
  • 2014-02-10 11:07:11
  • 1645

怎么让手机网站自适应设备屏幕宽度?

手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。 工具/原料...
  • smeller
  • smeller
  • 2017-04-28 16:55:39
  • 1216

手机移动web页面的排版与布局一点经验(尺寸单位兼容行。)

**总之一句话, 尽量用mm 毫米作为标准单位.** **总之一句话, 尽量用mm 毫米作为标准单位.** **总之一句话, 尽量用mm 毫米作为标准单位.** 采用新的相对单位 rem 首先设置...
  • phker
  • phker
  • 2015-11-03 20:03:21
  • 28689

移动端web及app设计尺寸

移动端高清、多屏适配方案 背景 开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 ...
  • liufeifei5211_163
  • liufeifei5211_163
  • 2017-07-27 22:48:16
  • 3537
收藏助手
不良信息举报
您举报文章:手机端网页所有内容根据屏幕大小自适应(大小,位置)
举报原因:
原因补充:

(最多只允许输入30个字)