1.使用元标签

元标签主要用于描述HTML网页文档的属性，如作者、日期和时间、网页描述、关键词、页面刷新等。其描述和关键词属性可以添加到网站的关键词中，使得网页对搜索引擎有利。

meta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scaled=no '/

说明：视口是指用户网页的可视区域，内容中的“宽度”是指虚拟窗口宽度。上面的代码表示虚拟窗口/页面宽度的初始比例为1，最小比例为1，更大比例为1，用户不可扩展，页面不可伸缩。

以上标签仅支持一种尺寸。正确的方法是用js动态生成下面的标签，前提是先获得屏幕尺寸。

脚本类型='text/javascript '

var PhoneWidth=ParSeint(window . screen . width)；

var PhoneScale=PhoneWidth/640；

var ua=navigator.userAgent

if (/Android (d .d )/。test(ua)){ var version=ParseFloat(RegExp。$1);

if(2.3版){ document . write(' meta name=' viewport ' content=' width=640，minimum-scale=' phoneScale '，maximum-scale=' phoneScale '，target-density dpi=device-dpi ' ')；}

else { document . write(' meta name=' viewport ' content=' width=640，target-density dpi=device-dpi ' ')；}

else { document . write(' meta name=' viewport ' content=' width=640，user-scalable=no，target-密度计dpi=device-dpi ' ')；}

/script

2.百分比法

CSS中的百分比是指相对于父元素的宽度。子元素的左填充：50%，父元素的宽度为100，边距-顶端：20%，则父元素的高度为100。正文的默认宽度是屏幕宽度(PC指浏览器宽度)，后代元素可以按百分比定位(或指定大小)。但这仅适用于简单布局的页面，很难实现复杂的页面。

3.使用CSS3单位rem

页面加载开始，首先判断窗口的宽度(就是窗口的宽度($(window))。width())，不是屏幕分辨率的宽度(screen.width，请自行参考区别)，假设宽度为W，宽度为640px的设计下一个div的宽度为dW1。如果html的字体大小是100px，那么这个div的宽度用rem表示

计算：div width DW2=DW1/100，PX和rem之间的转换可以除以100，假设屏幕宽度为640，如何处理不同宽度的屏幕，为了保证转换方便，需要为html设置合适的字体大小，计算：100/640=Fontsize/w，Fontsize=w/640 * 11大多数浏览器的最小字体大小是12px，所以只能用100作为缩放因子。

所以我将把这段JS代码添加到标题中：

脚本类型='text/javascript '

var html=document . query select or(' html ')；

var rem=html . offsetwidth/6.4；

html . style . FontSize=rem ' px '；

/script

4.媒体调查

媒体查询是为了解决网页适应手机屏幕的问题。媒体查询的功能是设置不同的css样式、页面大小、设备屏幕大小等。对于不同的“媒体”。例如，我们想为宽度小于480px的页面中class='icon '的元素设置样式，可以写成：@ mediascreen和(max-width=480 px) {。图标{ somestyles } }具体研究可以自己做。