在做web开发的工作中，会遇到需要我给页面根据设计的要求，进行响应式布局，这里跟大家分享下我对于响应式布局的解决方法：

我主要利用的是CSS3 媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
在实际操作中，我们使用到的代码有：

  1. @media all 用于所有设备 print 用于打印机和打印预览。
  2.  
  3. screen 用于电脑屏幕，平板电脑，智能手机等。
  4.  
  5. speech 应用于屏幕阅读器等发声设备。
  6.  
  7. orientation:portrait : 竖屏
  8.  
  9. orientation:landscape : 横屏
  10.  
  11. 注：横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的

　　

例如：

  1. @media all and (min-width:500px){
  2.  
  3. 　　#box{ background:blue;}
  4.  
  5. }

　　

这段代码的含义当分辨率>=500px的时候，会识别大括号里面的代码

同样我们可以知道：

  1. @media all and (max-width:500px){
  2.  
  3.      #box{ background:blue;}
  4.  
  5. }

　　

这段代码的含义当分辨率<=500px的时候，会识别大括号里面的代码

而当我们使用外部引入css的时候，可在link标签上加这样的代码：

  1. <link rel="stylesheet" href="hello.css" media="all and (min-width:600px)">

　　

这是我布局响应式的css依据，接下来我给大家分享下我常用的几种css单位：

rem

  1. rem单位是相对于字体大小的html元素，也称为根元素，也是我开发的时候经常用到的单位。
  2.  
  3. html {
  4.  
  5.       font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
  6.  
  7. }
  8.  
  9. .sqaure {
  10.  
  11.          width: 5rem; /* 50px */
  12.  
  13.           height: 5rem; /* 50px */
  14.  
  15. }

　　

em

  1. 相对于rem是于根元素（html）的字体大小，em则是相对于其父元素的字体大小，且最多取到小数点的后三位
  2.  
  3. <style>
  4.      html{ font-size: 20px; }
  5.      body{
  6.           font-size: 1.4rem; /* 1rem = 28px */
  7.           padding: 0.7rem; /* 0.7rem = 14px */
  8.      }
  9.      div{
  10.           padding: 1em; /* 1em = 28px */
  11.      }
  12.      span{
  13.           font-size:1rem; /* 1rem = 20px */
  14.           padding: 0.9em; /* 1em = 18px */
  15.      }
  16. </style>
  17.  
  18. <html>
  19.      <body>
  20.           <div>
  21.                <span></span>
  22.           </div>
  23.      </body>
  24. </html>

　　

rpx

  1. rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx，也是我微信小程序开发的常用单位。
  2.  
  3. 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。

　　

vw 和 vh

  1. vw为视窗宽度，1vw=视窗宽度的1%
  2.  
  3. vh为视窗高度，1vh=视窗高度的1%
  4.  
  5. 这是我开发最为喜欢的单位，无需做任何换算，还简单。

看到这里你可能会疑问，为什么没有px这个原始的像素单位，我这里说下我的看法，px设置字体大小时，是比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了，而我们用刚才的媒体查询来进行修改，会非常麻烦（代码量增加一倍，还没有上面的单位写的代码兼容稳定），而现在的页面开发都是需要你的代码兼容两端和各种尺寸的（手机电脑端），对于我来说，px确实已经不能作为主要开发的单位了。

以上就是我对响应式布局的理解和看法，如果有什么补充和见解，也欢迎在评论区留言。

CSS响应式布局学习笔记（多种方法解决响应式问题）的更多相关文章

  1. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  2. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. Django：学习笔记(4)——请求与响应

    Django:学习笔记(4)——请求与响应 0.URL路由基础 Web应用中,用户通过不同URL链接访问我们提供的服务,其中首先经过的是一个URL调度器,它类似于SpringBoot中的前端控制器. ...

  4. Java学习笔记之---方法和数组

    Java学习笔记之---方法与数组 (一)方法 (1)什么是方法? 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 (2)方法的优点 使程序变得更简短而 ...

  5. CTF-练习平台-Misc之 多种方法解决

    五.多种方法解决 题目提示:在做题过程中你会得到一个二维码图片 下载文件后解压发现是一个exe文件,打开后报错:将文件后缀名改为txt打开后发现是base64编码 联系到提示说最后是一个二维码,将它转 ...

  6. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  8. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  9. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

随机推荐

  1. 手把手教你使用Python轻松搞定发邮件

    前言 现在生活节奏加快,人们之间交流方式也有了天差地别,为了更加便捷的交流沟通,电子邮件产生了,众所周知,电子邮件其实就是客户端和服务器端发送接受数据一样,他有一个发信和一个收信的功能,电子邮件的通信 ...

  2. jquery ajax return不起作用

    jquery的ajax方法:在success中使用return:来结束程序的时候,结束的只是success这个方法,也就是说success中的return的作用范围只是success: 如果要想在su ...

  3. C#访问Access数据库提示未安装ISAM

    解决办法 1.在前面加上Jet OLEDB:,如: Jet OLEDB:Database Password='zt' <add name="ConStrOleDb" conn ...

  4. C#读取DLL文件获取所有类

    说明 调用Web.dll 文件,获取其中的所有的WebService 参考 https://blog.csdn.net/huoliya12/article/details/78873123 流程 使用 ...

  5. Powerdesigner中表导出sql语句关于字段注释乱码的问题

    问题说明 注释中的汉字都变成了?,应该是编码的问题. declare @CurrentUser sysname select @CurrentUser = user_name() execute sp ...

  6. CentOS7离线安装mysql5.6

    下载mysql5.6,系统选择redhat,版本选择RHEL7,下载RPM Bundle后得到一个tar文件.这里得到文件MySQL-5.6.44-1.el7.x86_64.rpm-bundle.ta ...

  7. datagrid 根据指定参数重新加载数据

    $('#statisticalRecordList').datagrid('reload',{ start_date:$('#dd1').datebox('getValue'), end_date: ...

  8. 工作中用的sql

    //字段是空字符串或者null select * from blade_process_should_pay_invoice where is_deleted = 0 and process_inst ...

  9. 深入浅出！阿里P7架构师带你分析ArrayList集合源码，建议是先收藏再看！

    ArrayList简介 ArrayList 是 Java 集合框架中比较常用的数据结构了.ArrayList是可以动态增长和缩减的索引序列,内部封装了一个动态再分配的Object[]数组 这里我们可以 ...

  10. String Boot有哪些优点

    a.减少开发,测试时间和努力. b.使用 JavaConfig 有助于避免使用 XML.c.避免大量的 Maven 导入和各种版本冲突. d.通过提供默认值快速开始开发.没有单独的 Web 服务器需要 ...