起航学习网

自适应网页已经成为了大势所趋，随之而来的也包括对WEBWeb前端开发工程师们的要求，比方说要把做品做成自适应模式的。那么该如何把Web前端开发网页做成自适应呢?

1：宽度自适应

所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的Web前端开发界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满地方式，里面的子元素固定或者左右浮动。

.div {

width:100%; height:100px;

}.child {

float: left;

}.child {

float:right;

}

由于父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被flex或者box这样的伸缩性布局方式替代，变得越来越“弹性”十足。需要了解弹性布局，请前往Flex布局教程和卤煮box布局教程比较。

2;完全自适应

这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询属性，根据不同的屏幕宽度，调整样式。实际上在这里，我们采用的是js和css属性rem来解决这个问题的。

文章出自：http://qh.itpxw.cn/peixun/web/202185164.html

文章标题：如何把Web前端开发网页做成自适应呢?

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉