浅谈pc和移动端的响应式
身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题？下面我们来说一下：
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和移动端的响应式的更多相关文章
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- CSS5:移动端页面(响应式)
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点 ...
- 【Vue高级知识】细谈Vue 中三要素（响应式+模板+render函数）
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- 移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- 如何做好移动端的响应式设计：Viewport控制
新人翻译,欢迎转载~ 英文原文地址:http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址:https://github.com/ireade/ ...
- 浅谈一下web移动端基本
屏幕尺寸.屏幕分辨率.屏幕像素密度 屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等. 屏幕分辨率 ...
- HTML多端适应 响应式布局案例
HTML布局: <div id="one"> <div class="aa"></div> <div class=&q ...
- javascript适合移动端的响应式瀑布流插件实例演示
在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...
随机推荐
- Scala - 快速学习01 - Scala简介
Scala简介 Scala(Scalable Language)是一门多范式(multi-paradigm)编程语言,Scala的设计吸收借鉴了许多种编程语言的思想,具备面向对象编程.函数式编程等特性 ...
- Vue-router导航问题
现在的项目,用的是Vue,但当时用的时候,是边学边做的,上手确实比较简单,但是已经用Vue写了一个项目了,但是感觉对Vue的还是不是很深刻,用的都是比较简单的API, 现在回头看看,有些东西,非常的精 ...
- mysql 开发进阶篇系列 1 SQL优化(show status命令)
一.概述 随着上线后,数据越来越多,很多sql语句开始显露出性能问题,本章介绍在mysql中优化sql语句的方法. 1. 通过show status 命令了解各种sql的执行频率 通过show [ ...
- flex布局常见用法小结
1,display:flex 这个在父容器中声明: 2,flex-direction:row / column 默认为横向,也在父容器中设置,定义flex布局的主轴方向:一条轴为主轴,那么另一条轴自然 ...
- 五分钟轻松了解Hbase面向列的存储
说明:从严格的列式存储的定义来看,Hbase并不属于列式存储,有人称它为面向列的存储,请各位看官注意这一点. 行式存储 传统的数据库是关系型的,且是按行来存储的.如下图: 其中只有张三把一行数据填满了 ...
- 使用Eclipse创建SpringBoot项目
1 首先我们需要安装STS插件:Help--> Eclipse Marketplace 安装成功之后,会让你重启eclipse. 2 然后 File-->New--->Proje ...
- Unicode 是不是只有两个字节，为什么能表示超过 65536 个字符
Unicode 目前规划的总空间是17个平面(平面0至16),0x0000 至 0x10FFFF.每个平面有 65536 个码点.你只是大致知道平面0(「Basic Multilingual Pl ...
- k8s与云服务器之间服务互访之节点网络打通
一.概述 k8s暴露服务的方式有很多使用ingress.nodeport等,这类比较适用于无状态的服务,对于statefulset部署的有状态的服务,(关于statefulset的介绍参考kubern ...
- Cookie提要
Cookie的基本概念和设置 Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制.从实现上说,Cookie是存储在客户端上的小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Coo ...
- nginx实现动态/静态文件缓存（week4_day1_part2）-技术流ken
nginx实现静态文件缓存实战 1.nginx静态文件缓存 如果要熟练使用nginx来实现文件的缓存,那下面的几个指令你必须要牢记于心 指令1:proxy_cache_path 作用:设置缓存数据的相 ...