身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题？下面我们来说一下：

1.响应式跟自适应有什么区别?

有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的.

自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

如下图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。

而如果用自适应布局去处理的话，那不管访问设备如何的不同（下图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

响应式网站：https://www.microsoft.com/zh-cn/

自适应网站：http://m.ctrip.com/html5/

2.实现响应式有哪几种方式?

1.使用媒体查询(Media Query) 结合 rem字体

记住,先在<head>标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示，并且禁止用户缩放页面):

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

其次是媒体查询，这个大家应该都知道，这个是响应式最重要的部分。

如果大于1000px，就用：

@media screen and (min-width:1000px){...}              对应PC端页面

如果在小于1000px和大于768px之间：

@media screen and (max-width:1000px) and (min-width:768px) {...}        对应平板端页面

如果小于768px：

@media screen and (max-width:768px){...}           对应手机端页面

然后是rem字体，rem是css3新出的单位，是指相对于根元素的字体大小的单位。一般设置在html,body，结合媒体查询我们可以这样写：

@media screen and (min-width:1000px){

　　html,body{

　　　font-size:14px;

　　}

}  

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

　　html,body{

　　　font-size:13px;

　　}

}  

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

　　html,body{

　　　font-size:12px;

　　}

}

然后在样式表里面,把px单位都转换为rem,这样rem就会根据我们在html,body设置的字体单位进行自动缩放的过程.

至于1px等于多少rem呢,我习惯是100px等于1rem,这样做的好处有两点:

第一,谷歌浏览器的默认字体是12px,小于就失效,如果1rem等于10px的话是没有任何效果的.第二,容易换算,例如我们15px的话,就写0.15rem.

当然还有几种比较方便的,如果你有使用webpack的话,可以使用postcss-pxtorem或者px2rem-loader,它们会把你写的样式打包的时候自动转换为rem,具体网上有教程.

转换前:

转换后:

还有一种就是使用sublime text的插件,cssrem神器!在你输入的时候就自动转换了.

这里介绍一种用js自动计算rem的方法,可以不用到媒体查询:

// 基准大小 相当于窗口缩放到设计稿的尺寸时body的字体大小 这里设置100px 方便计算

  const baseSize =

  // 设置 rem 函数

  function setRem() {

    // 当前页面宽度相对于1280宽的缩放比例，可根据自己需要修改。1280是设计稿的宽度

    const scale = document.documentElement.clientWidth / ;

    let autoWidth = Math.round((baseSize * Math.min(scale, )));

    //判断页面缩放到小于99px的字体时 就不再缩小 防止内容溢出

    if (Math.round((baseSize * Math.min(scale, ))) <= ) {

      autoWidth = ;

    }

    // 设置页面根节点字体大小

    document.documentElement.style.fontSize = autoWidth + 'px'

  }

  // 初始化

  setRem()

  // 改变窗口大小时重新设置 rem

  window.onresize = function () {

    setRem()

  }

这样只要把样式表的px单位都转换为rem即可.

2.使用插件(bootstrap)

栅格化布局，本例利用bootstarp的栅格系统

根据上图可以看到,只要在class加上bootstrap独有的Class前缀,就可以使用bootstrap了,当然你得先引入bootstrap的插件.示例:

<div class="col-xs-6 col-sm-3"></div>

这段代码的意思是在小于768px的尺寸下,这个div是占用一半的位置的,而在>=768px且<992px直接,这个div只占三分之一的位置.

这样就可以根据不同的屏幕尺寸来达到响应式效果.

3.使用弹性布局(flex)

由于弹性布局涉及的知识点比较多,后续会更~

ps:如果大家想了解一些前端界的最新知识或者技术,公众号"前端快讯"每天会为你推送最新的知识点!

可以通过扫下面的二维码就可以了，谢谢关注^_^

浅谈pc和移动端的响应式的更多相关文章

  1. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  2. CSS5:移动端页面(响应式)

    CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点 ...

  3. 【Vue高级知识】细谈Vue 中三要素（响应式+模板+render函数）

    [Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809

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

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

  5. Web移动端页面 --响应式和动态REM

    响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...

  6. 如何做好移动端的响应式设计：Viewport控制

    新人翻译,欢迎转载~ 英文原文地址:http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址:https://github.com/ireade/ ...

  7. 浅谈一下web移动端基本

    屏幕尺寸.屏幕分辨率.屏幕像素密度 屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等. 屏幕分辨率 ...

  8. HTML多端适应 响应式布局案例

    HTML布局: <div id="one"> <div class="aa"></div> <div class=&q ...

  9. javascript适合移动端的响应式瀑布流插件实例演示

    在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...

随机推荐

  1. Spark基础-scala学习（七、类型参数）

    类型参数是什么 类似于java泛型,泛型类 泛型函数 上边界Bounds 下边界 View Bounds Context Bounds Manifest Context Bounds 协变和逆变 Ex ...

  2. dubbo实用知识点总结（三）

    1. 服务降级 2. 优雅停机 3. 主机绑定 4. 访问日志 5. Multicast注册中心 6. zookeeper注册中心 7. 推荐用法 8. 容量规划 9. 基准测试工具包

  3. Docker0 网卡删除

    只需执行下面三步就可以了: 1.yum -y install bridge-utils 2.       ifconfig docker0 down 3.  brctl delbr docker0 执 ...

  4. alibaba的FastJson找不到JSON对象问题

    在现在出现使用JSON.toJsonString()方法时,可能没有JSON这个对象. 这种问题可能是下载的jar版本比较高.在低版本的jar使用的是JSON对象. 我使用的是1.2.47版本的jar ...

  5. html2canvas关于图片不能正常截取

    问题 首先说说遇到了什么问题.首先有这么一个需求.需要前端根据后端传过来数据,动态的生成图片.图片中的文案.背景图片.用户头像全部都是通过后端的接口获取.但是使用 html2canvas 生成的can ...

  6. 为什么阿里巴巴禁止开发人员使用isSuccess作为变量名

    答曰,是为了防止用加了is前缀命名的变量造成序列化与反序列不一致的问题

  7. 【golang-GUI开发】Qt5的安装

    golang一直被认为没有好的GUI库,事实并非如此. 目前有基于gtk+3.0的gotk3:https://github.com/gotk3/gotk3 以及接下来我们要说的qt:https://g ...

  8. 使用sublime text3编写vuejs项目需要安装的一些插件

    最近使用webstorm开发vuejs项目的时候经常出现卡顿的现象,感觉还是sublime text3比较轻巧便捷,但是使用sublime text3需要安装一些插件- 1. 让vue文件高亮: 安装 ...

  9. [转]php，使用Slim和Medoo搭建简单restful服务

    本文转自:https://www.jianshu.com/p/32b6d0284d97 关于rest和orm框架的组合使用,几年前我就写过使用Slim+Notorm来搭建restful服务,不过看到N ...

  10. 【Oracle 11gR2】静默安装 db_install.rsp文件详解

    #################################################################### ## Copyright(c) Oracle Corporat ...