如何使网页适应浏览器中的屏幕大小？

说明:

width = device-width: 宽度等于设备屏幕的宽度

initial-scale = 1.0: 表示: 初始缩放比例

minimum-scale = 0.5: 意味着: 最小缩放比例

maximum-scale = 2.0: 表示: 最大缩放比例

user-scalable = yes: 表示: 用户是否可以调整缩放比例

另外: 如果要控制字体的大小，则应使用相对大小，可以使用以下代码，通常没有必要，这里只是一种方法.

相对大小的字体

字体不能使用绝对大小px，而只能使用相对大小em.

body {font: 正常的100％Helvetica，Arial，无衬线；}

上面的代码指定字体大小为默认页面大小的100％，即16个像素.

h1 {font-size: 1.5em; }

然后，h1的大小是默认大小的1.5倍，默认大小是24像素（24/16 = 1.5）.

small {font-size: 0.875em;}

小元素的大小是默认大小的0.875倍，默认大小是14个像素（14/16 = 0.875）.

2. 让网页适应不同的浏览器

现在，浏览器布局分为两部分，一个是IE，另一个是NetScape. 即在中国占有绝对份额. 在这种情况下，我们设计的网页与之兼容，但是NetScape It仍然被国外许使用，毕竟，它是浏览器的老手.

尽管无法使网站与所有浏览器兼容，但是只要注意以下几点，创建的网页在每种浏览器中都能获得更好的显示效果:

a. 请勿混合使用图层和表格进行布局. 如果是父子关系（例如层中的表），则不在此原则的范围内.

b. 内联CSS在Netscape Navigator中经常出现问题. 使用链式或嵌入式CSS.

c. 有时有必要在空层中插入表格或透明图片，以确保在Netscape Navigator中的效果.

d. 对于宽度或高度只有几个像素的图层，请使用图片.

e. 避免使用W3C组织不建议使用的排版属性，而应使用CSS.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shumachanpin/article-310703-1.html