欢迎光临
我的个人博客网站

CSS响应式布局学习笔记(多种方法解决响应式问题)


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

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

@media all 用于所有设备 print 用于打印机和打印预览。

screen 用于电脑屏幕,平板电脑,智能手机等。

speech 应用于屏幕阅读器等发声设备。

orientation:portrait : 竖屏

orientation:landscape : 横屏

注:横竖屏操作,只是针对移动端的。在PC端屏幕永远是竖屏的

例如:

@media all and (min-width:500px){

  #box{ background:blue;}

}

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

同样我们可以知道:

@media all and (max-width:500px){

     #box{ background:blue;}

}

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

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

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

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

rem

rem单位是相对于字体大小的html元素,也称为根元素,也是我开发的时候经常用到的单位。

html {

      font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差,具体表现为 1rem = 9.93px。 */

}

.sqaure {

         width: 5rem; /* 50px */

          height: 5rem; /* 50px */

}

em

相对于rem是于根元素(html)的字体大小,em则是相对于其父元素的字体大小,且最多取到小数点的后三位

<style>
     html{ font-size: 20px; }
     body{
          font-size: 1.4rem; /* 1rem = 28px */
          padding: 0.7rem; /* 0.7rem = 14px */
     }
     div{
          padding: 1em; /* 1em = 28px */
     }
     span{
          font-size:1rem; /* 1rem = 20px */
          padding: 0.9em; /* 1em = 18px */
     }
</style>

<html>
     <body>
          <div>
               <span></span>
          </div>
     </body>
</html>

rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx,也是我微信小程序开发的常用单位。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px = 1物理像素。

CSS响应式布局学习笔记(多种方法解决响应式问题)

vw 和 vh

 

 vw为视窗宽度,1vw=视窗宽度的1%

vh为视窗高度,1vh=视窗高度的1%

这是我开发最为喜欢的单位,无需做任何换算,还简单。

 

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

 

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS响应式布局学习笔记(多种方法解决响应式问题)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏