浅谈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" ...
随机推荐
- Metasploit Framework（7）客户端渗透（下）
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 应用场景: Kali机器IP:192.168.163. ...
- ELK搭建elasticsearch常见报错
问题一: [2018-01-31T16:27:21,712][WARN ][o.e.b.JNANatives ] unable to install syscall filter: Java.lang ...
- flash中调用XML遇到的中文显示异常问题
昨天使用flash调用XML文件进行显示时,出现了中文无法显示的问题,记录一下解决方法: 1.字体设置: 一般flash里的动态文本和嵌入文本都是默认的使用Arial字体,这个字体里可能没有中文,所以 ...
- ubuntu 16.04 清空log文件的方法
由于ubuntu日志文件syslog 和 kern.log 时刻在增长,一会儿就使得根目录文件夹不够用了,需使用如下命令清理 sudo -i 然后输入密码,执行: echo > /var/log ...
- Kubernetes 服务入口管理与 Nginx Ingress Controller
Kubernetes 具有强大的副本,动态扩容等特性,每一次 Pod 的变化 IP 地址都会发生变化,所以 Kubernetes 引进了 Service 的概念.Kubernetes 中使用 Serv ...
- SVN用户切换
Eclipse的SVN插件Subclipse做得很好,在svn操作方面提供了很强大丰富的功能.但到目前为止,该插件对svn用户的概念极为淡薄,不但不能方便地切换用户,而且一旦用户的帐号.密码保存之后 ...
- Redux 实现过程的推演
这是一篇浅入浅出的 Redux 实现过程的推演笔记!正常来说应该是要从源码下手开始解析,这里是逆向推演,假如有需求是要这么一个东西,那么该如何从零开始实现? 通过该笔记,更多的是希望自己能够多熟悉从无 ...
- python练习七—P2P下载
最近有些事儿比较忙,python的学习就断断续续,这个练习来得比预期的晚,不过还好,不管做什么,我都希望能认真对待,认真做好每一件事. 引入 这个练习原书中称作“使用XML-RPC进行文件共享”,题目 ...
- 网络编程第三讲UDP编写
网络编程第三讲UDP编写 一丶UDP简介 UDP是面向无连接的.就是说数据传输会丢掉.网络延时比较大的情况下.会早上丢包.例如视频通话.就是UDP UDP不需要建立建立. 下面有UDP编写流程图 下图 ...
- Ubuntu 下 Galera cluster for MySQL 集群安装
mysql galera cluster官网:http://galeracluster.com/documentation-webpages/ 相关安装教程:(不一定管用) http://blog.c ...