HTML5网页如何在电脑端和手机端都全屏显示?

html-css05

HTML5网页如何在电脑端和手机端都全屏显示?,第1张

HTML5网页在电脑端和手机端都全屏显示的步骤如下:

1、打开HTML5网页代码。

2、在网页头部加上新代码,让网页的宽度自适应设备的宽度。代码如下:

<meta name="viewport" content="width=device-width

initial-scale=1.0

maximum-scale=1.0

minimum-scale=1.0

user-scalable=no" />

3、在输入代码完成后,把图片包括图片DIV 的宽度设置成百分之百即可。

布局宽度:width:100%;即可

小的方面或者细节方面可以固定,整体用百分比来控制,这样就会全屏;

还有一种方法用@media

screen,来判断浏览器的宽度如:

@media

screen

and

(min-width:360px){body,input,select{font-size:15px}}

当浏览器宽度(width)大于360px时,文字大小15px,当然需要其他属性可以继续添加;

或者@media

screen

and

(max-width:1440px){body,input,select{font-size:12px}}

当浏览器宽度小于1440px时要取值什么样的文字大小;等等