pc响应式：(所有应用在pc端)

解决方案1.媒体查询 2.flex,百分比  3.栅格布局

媒体查询

@media screen and (max-width:768px)

@media screen and (min-width:768px) and (max-width:1280px)

@media screen and (min-width:1281px) and (max-width:1600px)

@media screen and (min-width:1600px)

H5响应式（移动端）

需要解决的问题：1.字体大小 2.元素大小，布局 3.元素边距，内填充

解决方案：

1.淘宝flex插件：https://github.com/amfe/lib-flexible(核心:rem+flex)

2.对视图进行放大缩小

3.rem+flex

4.媒体查询+百分比+flex

pc和H5响应式方案的更多相关文章

  1. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  2. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

  3. 移动端和pc端，响应式设计布局

    1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...

  4. HTML H5响应式，表格，表单等

    HTML杂项 响应式图片 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800 ...

  5. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  6. Axure响应式进阶

    Axure响应式进阶 2018年6月2日luodonggan 随大屏幕分辨率普及,网页设计在交互阶段就必须考虑响应式方案,Axure7作为我偏爱的交互设计工具果然也没让大家失望的新增了Adaptive ...

  7. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  8. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  9. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

随机推荐

  1. 我来教你用AWS IoT.Part1--配置和接入

    AWS的IOT服务在中国区才开放.由于工作原因需要简单试用评估.写一下自己简单试用的流程,供其他人参考. 直接贴流程 1.先注册一个类型(这里“类型”相对于编程,可以理解为父类,里面可以添加一些可继承 ...

  2. [转]vue router基本使用

    第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; im ...

  3. 【codeforces 766A】Mahmoud and Longest Uncommon Subsequence

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  4. dotnet core 使用 CoreRT 将程序编译为 Native 程序

    现在微软有一个开源项目 CoreRT 能通过将托管的 .NET Core 编译为单个无依赖的 Native 程序 这个项目现在还没发布,但是能尝试使用,可以带来很多的性能提升 使用 CoreRT 发布 ...

  5. 前端导出&配置问题

    <button class="search" onclick="method5('dataTable');">导出</button> 在 ...

  6. iview table中的render函数使用

    1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...

  7. koa2+koa-art-template利用日期管道实现在jat模板中将时间戳转为日期时间

    var sp = require("silly-datetime"); var render = require("koa-art-template"); va ...

  8. 为何D3D11的几个矩阵需要转置？

    在学习D3D11的时候遇到一个问题,事情是这样的: D3D11引入了常量缓存(const buffer)用来实现数据的高速传输,这块儿buffer是CPU Only Write,GPU Only Re ...

  9. git无密码push

    近来项目中调研,jupyterlab和git的整合内容,git server我使用的gitbucket和bitbucket.(项目要求使用bitbucket,看错一个字母下载了两个镜像) gitbuc ...

  10. 循环语句作业与循环补充（continue与break）

    作业: 1.使用while循环输入1 2 3 4 5 6 8 9 10(没有7) n = 1 while n < 11: if n == 7: pass else: print(n) n = n ...