如何让你的网站界面自适应?自适应界面的制作方法

洪七公 · 发表于 2023-5-23 10:24:22

前端人员面临的早已不仅仅是pc端的几个主流尺寸的适应，还有碎片化极其严重的手机端，pad端。有些网站采取的方式是根据设备的不同提供不同的网页，以满足在各个设备的完美展示。但是这种方式也有很大的弊端，那就是增加了开发工作量和维护的工作量。如果是大型的网站，这种方式会大大增加成本。那么，前端工程师是否可以开发一套网页来适应各种尺寸设备呢？答案是肯定的，自适应网页设计就是我们目前来说比较优良的解决方案。

其实你可以看下现在很多大型的站点，都是采用一定的自适应写法，以满足各种视口的显示要求！

那么如何写一个自己的自适应界面呢？下面是锦尚中国小编在常年的网站前端制作过程中总结出来的几个最最最最最基本的要求，别着急，跟着小编往下学习！

一.什么叫自适应？

自适应网页设计是指：自动识别屏幕宽度或高度，并作出相应调整的网页设计。

二.如何自适应

1.自适应网页设计是基于浏览器允许网页自动调整宽度。现在主流的浏览器都支持这一功能，包括一直让前端工程师头疼的IE系列，在<head></head>加上祖传的viewport代码：

<meta name="viewport" content="width=device-width, initial-scale=1">



viewport是视图。上面代码的意思是让网页的视图宽度等于设备宽度，缩放比例为1（默认不缩放）

2.采用相对单位百分比或者rem替代绝对单位px。主要是以下几方面：

a.宽度。比如说html,body等宽度设定为100%

b.高度。

c.字体使用rem

body{ width:100%; height:100%; font-size:625%;}

h1{ font-size:.14rem}

rem是相对单位，它和em相对父元素不同，是相对于根元素html。所以我们只需要设置html的字体大小。eg.

html{ font-size:625%; //(100px/16px)*100%=625%(这里设置了根元素的字体为100px)}

h1{ font-size:.14rem //.14rem*100 = 14px}

浏览器的根元素默认字体大小为16px。在上例中我们指定了html字体大小为100px，即可以认为1rem = 100px。所以，设定14px为0.14rem.

3.媒体查询 (@media)

1.针对不同尺寸设置样式

@media screen and (max-width:475px) {

body{background-color:black;//当屏幕宽度小于475px的时候，body的颜色变成黑色

}}

2.可以不同的媒体类型定义不同的样式

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="my.css">

媒体查询可以不同的媒体类型定义不同的样式，也可以根据不同的屏幕尺寸定制样式。将媒体查询和第二点所说的rem单位配合起来，可以实现大部分的页面自适应。

媒体查询则可以根据屏幕尺寸的不同设置html的font-size；rem是相对于根元素html的相对单位。可以通过给html设置不同的font-size来规定1rem等于多少px。简而言之，最后我们可以通过媒体查询设置html的font-size来设置不同尺寸下1rem和1px的不同比例。eg：

html{

font-size:625%;//(100px/16px)*100%=625%(这里设置了根元素的字体为100px)

}

@media screen and (max-width:475px) {

html{background-color:500%;

;}

.container{height:2rem;}

上例中，在屏幕宽度大于475px的设备中，.container的实际高度为200px；而在屏幕宽度小于475px的设备中，.container的实际高度为160px。这样，我们就通过了使用相对单位rem和媒体查询实现了元素高度的自适应。

实用小建议
1.如何选择是根据屏幕宽度自适应还是高度自适应？

大多数情况下都是根据宽度来定的。因为用户一般更能接受纵向滚动条，而横向滚动条是要尽量避免的。

根据需求的不同有时候也需要选择根据高度自适应。例如：需要不论是什么屏幕都是一屏展示完，而不需要纵向滚动条。

2.按需用上max-width，min-width，max-height，min-height。给元素设定宽度或者高度的边界值，以防止在过小的屏幕或者过大屏幕上的失常表现。

好了，只要是掌握了这几点，优化界面或者是设计界面都是有用处的，更多资源请搜索锦尚中国源码论坛，感谢大家的支持与厚爱！

		自动登录	找回密码
密码			会员注册

[CSS/Html] 如何让你的网站界面自适应?自适应界面的制作方法