关于响应式布局和自适应布局

最新推荐文章于 2021-04-18 22:55:29 发布

野爹玛卡巴卡

最新推荐文章于 2021-04-18 22:55:29 发布

阅读量215

点赞数

本文链接：https://blog.csdn.net/qq_42201141/article/details/103881586

版权

现在随着移动设备的增多，各种不同分配率大小的设备也见怪不怪了，怎样在移动端布局不会崩塌

自适应布局

为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个入口，会大大增加架构设计的复杂度。自适应还暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤

响应式布局

在自适应布局基础上做了系列优化，解决了屏幕小内容拥挤的问题，响应式网页的概念是一套适应代码为不同的设备提供不同的网页，换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。就算维护也只是针对那一套代码

关于自适应布局和响应式布局的区别

通过各方面的资料查询，总结了几点区别

①.自适应布局是多各网页对应对个设备，响应式布局是一套网页对应多个设备

②.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局全部适应

③.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计

关于适配的写法

自适应布局和响应式布局两者都是通过检测视口分辨率来展示对应设计的网页，所以<head></head>标签内必须加上<meta name="viewport" content="width=device-width,initial-scale:1.0"/>

响应式布局案例

用响应式写一个针对不同设备的字体大小变化：

/*针对pc端*/
@media screen and (min-width:920px) {
	body{
		font-size: 12px;
	}
}
/*针对pad*/
@media screen and (min-width: 767px) and (max-width:919px) {
	body{
		font-size: 24px;
	}
}
/*phone*/
@media only screen and (max-width: 766px) {
	body{
		font-size: 36px;
	}
}

自适应布局案例

因为自适应布局是写多套针对不同设备的代码，所以适配的案例无法展示，就跟大家讲一哈自适应的布局，页面的自适应布局分为高度自适应和宽度自适应，来看看宽度自适应的布局，宽度自适应有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。

<body>        
        <div class="left">200px</div>
        <div class="main">自适应</div>
        <div class="right">200px</div>
</body>

html,body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: pink;
}
.left,.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

野爹玛卡巴卡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于响应式布局和自适应布局

现在随着移动设备的增多，各种不同分配率大小的设备也见怪不怪了，怎样在移动端布局不会崩塌自适应布局为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个入口，会大大增加架构设计的复杂度。自适应还暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内...
复制链接

扫一扫