响应式开发

响应式开发原理

实现响应式开发需要使用到 媒体查询
@media 是css3里面新增的属性
通过判断屏幕得大小 来决定使用什么样得布局方式(让什么样得样式生效)

屏幕得分类 :
超小屏幕 width < 768px
小屏幕 width > 768px && width < 992
中屏幕 width > 992px && width < 1200
大屏幕 width > 1200px

语法 :

	@media(判断条件) {   
	              元素样式
	      }    

例如 :

1. 表示的是 屏幕宽度大于等于768的时候 横向导航生效

       @media( min-width: 768px) {
            ul {
                flex-direction: row; 
            }
         }

2. 表示 屏幕宽度小于768的时候 纵向导航生效

      @media (max-width: 768px) {
            ul {
                flex-direction: column; 
            }
         }

2. 响应式开发与原生的区别

1. 显示的结构上
   响应式开发 不同的屏幕大小 会显示不同的布局 但是图片以及字体的大小不会发生变化 仅仅只是布局
   原生的移动端开发 根据屏幕大小的不同 对页面内容进行等比缩放

2. 开发的页面不同
   响应式开发 开发的只是一个页面 而且同时运行在移动端和PC端 但是根据不同的屏幕大小 会调整页面布局 展示对应端的页面结构
   移动端开发 其实是开发两套页面 分别针对于移动端 和 PC端进行开发 当在不同的端时 就加载对应的页面

3. 应用场景
   响应式开发 是使用一个页面适配多个终端 开发效率很高 但是由于所有的代码都在一个页面上 所以 会有冗余的现象 运行效率低
   一般指是用于单纯的展示 和 宣传的页面 一般是公司官网 活动页面
   移动端 针对每个不同的端 都要开发出一套页面 开发维护效率低 但是由于针对性很强 只需要对应端的页面代码 运行效率高
   一般这种会使用于老的网站 对于已经上线的老系统 需要开发移动端 就单独再写一套移动端代码 而且还适用于 对页面性能要求很高的页面
   例如 电商网站 直播网站