浅谈pc和移动端的响应式的使用


Posted in HTML / CSS onJanuary 03, 2019

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

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

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

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

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

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

浅谈pc和移动端的响应式的使用

响应式网站: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,具体网上有教程.

转换前:

浅谈pc和移动端的响应式的使用

转换后:

浅谈pc和移动端的响应式的使用

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

浅谈pc和移动端的响应式的使用

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

// 基准大小 相当于窗口缩放到设计稿的尺寸时body的字体大小 这里设置100px 方便计算
  const baseSize = 100
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于1280宽的缩放比例,可根据自己需要修改。1280是设计稿的宽度
    const scale = document.documentElement.clientWidth / 1280;
    let autoWidth = Math.round((baseSize * Math.min(scale, 2)));
    //判断页面缩放到小于99px的字体时 就不再缩小 防止内容溢出
    if (Math.round((baseSize * Math.min(scale, 2))) <= 99) {
      autoWidth = 99;
    }
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = autoWidth + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem()
  }

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

2.使用插件(bootstrap)

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

浅谈pc和移动端的响应式的使用

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

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

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

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

3.使用弹性布局(flex)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 #HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 #HTML / CSS
html Table 表头固定的实现
Jan 22 #HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 #HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 #HTML / CSS
web页面录屏实现
Feb 12 #HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 #HTML / CSS
You might like
php 短链接算法收集与分析
2011/12/30 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
薪资那么高的Web前端必看书单
2017/10/13 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JS原型对象操作实例分析
2020/06/06 Javascript
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python高斯消除矩阵
2019/01/02 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python with语句和过程抽取思想
2019/12/23 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
PyQt5实现登录页面
2020/05/30 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Python扫描端口的实现
2021/01/25 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
后勤部长岗位职责
2013/12/14 职场文书
班组长岗位职责范本
2014/01/05 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle