响应式前端页面

响应式页面简介

响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。完整的响应式网站的实现其实需要考虑到以下这些问题：响应式布局、响应式html和css、响应式媒体、响应式javascript。

方法

响应式布局

(1)设置viewport元标签

<meta name="viewport"
content="width=device-width,
initial-scale=1.0, user-scalable=no">

使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。

(2避免使用绝对单位(px)，用相对单位代替(%、auto、em等)

(3)使用流式定位:float

(4)图片大小实现自适应:
img {max-width: 100%;}
会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。

(5)根据浏览器屏幕的特征，有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)
为不同尺寸的屏幕设置不同的 CSS 样式

属性名	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

/* 屏幕小于 300 px */
@media screen and (max-width: 300px) {
    div {
        background-color:red;
    }
}

/* 屏幕大于 300 px */
@media screen and (min-width: 300px) {
    div {
        background-color:yellow;
    }
}

/* 屏幕小于 300px 大于 200px */
@media screen and (min-width: 200px) and (max-width: 300px){
    div {
        background-color:blue;
    }
}

响应式html和css

方法思路一：使用相同html结构，对于要在移动端要隐藏的dom元素，可以通过display: none来控制html是否显示；

方法思路二：动态使用js渲染不同内容，但是这样会增加移动端js大小，而且css样式文件必不可少。

相比之下，我们使用了思路一的方案。其实使用js的渲染方案也是可以的，不过毕竟保留html比使用js简单。

响应式javascript

真正的响应式设计的网站，处理使用不同的布局、html、css和图片，还需要根据浏览器环境来异步加载不同的js文件。主要通过设备环境判断来异步加载不同的javascript。

if(isMobile){
    require.async(['zepto', './mobileMain'], function($, main){
        main.init();
    });
}else{
    require.async(['jquery', './main'], function($, main){
        main.init();
    });
}

参考：
web前端响应式设计总结：https://blog.csdn.net/pupilxiaoming/article/details/77703805
前端实现响应式布局的几种方法：https://blog.csdn.net/DDDHL_/article/details/123603557