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. Python--day62--编辑出版社功能

    1,Django项目主要用到的文件

  2. fatal: Not a git repository (or any of the parent directories)

    当从github.com上面下载下了Firmware后,无意中删除了Firmware目录下的.git文件夹,再去编译就会出现:   fatal: Not a git repository (or an ...

  3. js基础——面向对象（构造函数）

    1.面向对象:类的标志,通过类可创建多个具有相同属性和方法的对象 2.创建对象 1)工厂模式方式:避免重复实例化但未能解决识别问题  function boss(name, age) {       ...

  4. asp dotnet core 图片在浏览器没访问可能原因

    我写了一个项目用来广告就用到广告的图片,但是广告的图片放在博客的链接无法访问,连我的方法都没有调用,而我尝试网页直接访问图片链接是可以访问的,最后找到原因是广告插件禁用了图片访问 我在一个方法创建了广 ...

  5. slot的使用方法

    参考链接:https://www.cnblogs.com/loveyt/p/9946450.html 插槽的使用其实是很简单,你只需明白以下两点,就很容易理解. 1.插槽是使用在子组件中的, 2.插槽 ...

  6. 【t044】弗洛伊德

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 弗洛伊德是一个大牛!给一个有向图G,他有n个结点,现在请你求出对于他的每一对结点(x,y),从x出发走 ...

  7. jquery file upload + asp.net 异步多文件上传

    百度了很久,国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码 一开始使用 jquery uploadify ,一款基于 flash的插件,但是不支持 Sa ...

  8. mybatis的核心配置文件

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...

  9. Struts2标签库常用标签（转）

    struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@ taglib prefix="s" uri="/struts-t ...

  10. sql查询分类和所有子类

    select * from [JianDu].[dbo].[ZuZhiJiGou] where id = 64 --查询节点 union allSELECT TOP 1000 a.* FROM [Ji ...