pc页面自适应怎么写( 二 )


老版本的IE不支持max-width,所以只好写成:img { width: 100%; }
筚五、采用相对字体大小
字体也不能使用绝对大小(px),而只能使用相对大小(em) 。
这里最重要的,是第三条和第四条,也就是采用流动布局和css选择加载 。祝你好运!
3.怎样让我的pc网站自适应手机屏幕 按屏幕大小缩放适应方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解释:
width=device-width :宽度等于设备屏幕的宽度
initial-scale=1.0:表示:初始的缩放比例
minimum-scale=0.5:表示:最小的缩放比例
maximum-scale=2.0:表示:最大的缩放比例
user-scalable=yes:表示:用户是否可以调整缩放比例
2
另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说名一种方法 。
相对大小的字体
字体也不能使用绝对大小px,而只能使用相对大小em 。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定,字体大小是页面默认大小的100%,即16像素 。
h1 {font-size: 1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5) 。
small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875) 。
有两种
1.通过设置viewport参数
2.使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放 。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题 。
<</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度 。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
4.如何让WEB页面自适应大小很高兴帮到你
你说的这个是网页的自适应
我刚修改完我的网站,强烈不建议购买现成的自适应网站或者使用转码工具,很垃圾 。
如果你有技术,会修改JS和css,请按照以下步骤操作:
首先在js里面添加判断语句,主要功能为判断浏览器为移动端时加载某个css,例如123.css,加载路径一定要注意,不要写错了,路径请使用绝对路径 。
其次,编辑123.css,宽度使用百分比,字体大小也是用em而不是固定值px,编辑过程中需要删除一些不必要的版块,也就是说并不是电脑上显示的手机上就都得显示 。
最后,导航栏使用点击下啦的方式,不点击自动收回 。一定要考虑不同分辨率下的显示情况,这个很关键,必要时可使用不同分辨率缩放功能(需要js和css配合)
这个修改的过程非常麻烦,需要很大的耐心 。
5.html自适应怎么做 有高手吗对html布局而言,传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间,当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置 。
考虑到17寸非主流脑残显示器依然占有不少的份额,同时为大分辨率显示器做适当的适配,一种网页宽度自适应布局应运而生,宽度自适应仅仅指pc端的宽度自适应 。