2020-10-21 10:12:28
无锡手机网站建设自适应屏幕大小代码!手机网站根据屏幕分辨率调用相应的CSS。首先要在头部加上,表示极限屏幕宽度是物理宽度。
或者这句话告诉浏览器视口宽度等于设备屏幕宽度,不进行初始缩放。
按照屏幕分辨率调用Css,关于建站网站,普通手机屏幕宽度为240PX360PX480PX640PX等。
当手机分辨率为360PX宽时调用:
@mediascreenand(小宽度:360px){
。文本{padding-bottom:0;{}
{}
@mediascreenand(小宽度:480px){
。文本{padding-bottom:0;{}
{}
或者可以根据分辨率不同在前台页面调用不同的CSS:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="http://www.studstu.com/css/pic320.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 479px) and (max- width: 639px)" href="http://www.studstu.com/css/pic480.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 639px)" href="http://www.studstu.com/css/pic640.css">
手机网站自适应手机屏幕宽度代码:
在页面顶部添加。
视口是网页的默认宽度和高度。关于网站模板,上面的代码表示网页宽度默认等于屏幕宽度(width=device-width),初始比例(initial-scale=1)为1.0,即网页的初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老浏览器(主要是IE6,7,8),需要css3-mediaquery.js。
不允许用户放大和缩小页面以及页面的自适应宽度。
<meta name="viewport" content="initial-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
根据不同的屏幕设置相应的CSS,关于自助建站,是目前手机网站使用广泛的自适应编码方式。