如何适应所有的网页屏幕宽度分辨率

随着网络和技术的迅速发展，越来越多的手机厂商开始打手机之战。手机的快速发展也使得越来越多的人开始使用手机上网。移动设备正在超越桌面设备，成为访问互联网更常见的终端。那么会出现一个问题，如何让手机上的PC端页面正常显示？手机的屏幕宽度和PC的屏幕宽度有很大的差异，导致在手机和PC端出现两个不同的显示结果相同的内容。如何使手机和PC在网页上获得满意的效果？本文收集了以下方法，感兴趣的合作伙伴可以看到： 
1，在网页代码头部添加一行viewport元标记。 
视口是页面的默认宽度和高度。上述代码行表示网页的默认宽度等于屏幕的宽度（width = device-width），网页的初始缩放比例为1.0 100％。 
注意：此方法不支持IE8和IE8以下版本 
2，不要使用大概宽度 
因为页面根据屏幕宽度调整布局，所以不能使用大概宽度布局或大概宽度的元素。 图像也是如此。 
具体而言，CSS代码无法指定像素宽度：width：xxx px;
您只能指定百分比宽度：宽度：xx％; 或宽度：自动; 
3，使用字体的相对大小 
字体不能使用大概大小（px），只能使用相对大小（em或rem） 
例如：身体 
上面的代码指定字体大小是页面默认大小的100％，即16像素（1em = 16px）。 
H1 
h1的大小是默认大小的1.5倍，即24像素（24/16 = 1.5） 
通过删除默认的16像素来获得你想要的时间 
4，流程布局（流体网格） 
“流程布局”的含义是每个区块的位置是浮动的，而不是固定的。 
。主要.leftBar 
浮点的优点是，如果宽度太小而不能适应两个元素，则以下元素将自动滚动到前一个元素的下方，并且不会在水平方向溢出，从而避免了水平滚动条。 
5，媒体审讯员@media 
“自适应网页设计”的核心是CSS3引入的MediaQuery模块。 
这意味着它会自动检测屏幕的宽度并加载相应的CSS文件。 
上面的代码表示如果屏幕宽度小于400像素（max-device-width：400px），则加载tinyScreen.css文件。 
如果屏幕宽度在400像素和600像素之间，请加载smallScreen.css文件。