响应式和自适应布局

简介: 响应式和自适应布局
  1. 响应式布局:就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>%和rem布局</title><style>html {
font-size: 30px;
      }
      .box2 {
width: 10rem;
height: 10rem;
background-color: plum;
      }
      .box {
width: 80%;
height: 200px;
background-color: aquamarine;
      }
      .part {
width: 80%;
height: 80%;
background-color: pink;
      }
</style></head><body><divclass="box"><divclass="part"></div></div><divclass="box2"></div></body></html>
  1. 自适应布局:就是能为了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,需要开发多套界面来适应不同的终端。
<divclass="container"><divclass="left">固定宽度</div><divclass="right">自适应</div></div>
* { margin: 0;padding: 0 }
.container {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
float: none;
width: 100%;
height: 100%;
background-color: #9dc3e6;
} 

区别:


1、自适应布局:是通过检测视口分辨率来判断当前访问的设备屏幕大小,从而请求服务层返回不同的页面。

响应式布局:是通过检测视口分辨率针对不同客户端在客户端做代码处理,来展现不同的布局和内容。

2、自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了

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

4、自适应布局如果屏幕太小会发生内容过于拥挤,响应式布局可以自动识别屏幕宽度并作出相应的调整页面设计


相关文章
|
11月前
|
前端开发 JavaScript vr&ar
WebGL
WebGL(Web Graphics Library)是一种用于在网页上渲染交互式 3D 和 2D 图形的 JavaScript API,它基于 OpenGL ES 2.0 标准,为开发者提供了一种在浏览器中创建高性能图形应用的途径
|
数据采集 Java 数据库
大学里面抢课到底可行吗?我来给你彻底说明白
大学里面抢课到底可行吗?我来给你彻底说明白
|
API
GEE案例分析——利用sentinel-3数据计算空气污染指数(Air Pollution Index,简称API)
GEE案例分析——利用sentinel-3数据计算空气污染指数(Air Pollution Index,简称API)
416 0
|
12月前
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
836 0
|
数据采集 前端开发 数据可视化
程序员必知:基于氚云平台的应用开发学习(一)
程序员必知:基于氚云平台的应用开发学习(一)
504 0
|
JavaScript 前端开发 Linux
vite 中使用环境变量的相关总结
vite 中使用环境变量的相关总结
550 0
|
前端开发 JavaScript 测试技术
探讨前后端分离架构在Web应用开发中的优势与实践
本文将深入探讨前后端分离架构在Web应用开发中的优势与实践。通过明确前后端分离的定义和原理,分析其在提高开发效率、降低耦合性、增强可维护性等方面的优势。同时,为读者提供了一些实践指导,包括如何选择适合的前后端分离框架、如何合理划分前后端职责等,旨在帮助开发者更好地应用这一架构并取得良好的开发效果。
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
小程序
微信小程序音频后台播放功能
微信小程序音频后台播放功能
1332 0
|
iOS开发 MacOS Windows
Mac 去除自动生成.DS_Store文件
Mac 去除自动生成.DS_Store文件
779 0