响应式开发原理
实现响应式开发需要使用到 媒体查询
@media 是css3里面新增的属性
通过判断屏幕得大小 来决定使用什么样得布局方式(让什么样得样式生效)
屏幕得分类 :
超小屏幕 width < 768px
小屏幕 width > 768px && width < 992
中屏幕 width > 992px && width < 1200
大屏幕 width > 1200px
语法 :
@media(判断条件) {
元素样式
}
例如 :
- 表示的是 屏幕宽度大于等于768的时候 横向导航生效
@media( min-width: 768px) {
ul {
flex-direction: row;
}
}
- 表示 屏幕宽度小于768的时候 纵向导航生效
@media (max-width: 768px) {
ul {
flex-direction: column;
}
}
2. 响应式开发与原生的区别
-
显示的结构上
响应式开发 不同的屏幕大小 会显示不同的布局 但是图片以及字体的大小不会发生变化 仅仅只是布局
原生的移动端开发 根据屏幕大小的不同 对页面内容进行等比缩放 -
开发的页面不同
响应式开发 开发的只是一个页面 而且同时运行在移动端和PC端 但是根据不同的屏幕大小 会调整页面布局 展示对应端的页面结构
移动端开发 其实是开发两套页面 分别针对于移动端 和 PC端进行开发 当在不同的端时 就加载对应的页面 -
应用场景
响应式开发 是使用一个页面适配多个终端 开发效率很高 但是由于所有的代码都在一个页面上 所以 会有冗余的现象 运行效率低
一般指是用于单纯的展示 和 宣传的页面 一般是公司官网 活动页面
移动端 针对每个不同的端 都要开发出一套页面 开发维护效率低 但是由于针对性很强 只需要对应端的页面代码 运行效率高
一般这种会使用于老的网站 对于已经上线的老系统 需要开发移动端 就单独再写一套移动端代码 而且还适用于 对页面性能要求很高的页面
例如 电商网站 直播网站