css如何设置不同分辨率下的样式?

css如何设置不同分辨率下的样式?下面本篇文章给大家介绍一下CSS根据不同的分辨率显示不同样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css如何设置不同分辨率下的样式?

在写响应式网页的时候,我们需要网页有几种显示方式,我们可以用CSS实现这个功能

使用CSS提供的媒体查询,我们可以根据屏幕分辨率来使用相应的CSS样式

@media 媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。

语法:

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型(mediaType )

类型有很多,在这里不一一列出来了,只列出了常用的几个。

描述
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕,平板电脑,智能手机等。(最常用)
speech应用于屏幕阅读器等发声设备

媒体功能(media feature)

媒体功能也有很多,以下列出常用的几个

描述
max-width定义输出设备中的页面最大可见区域宽度
min-width定义输出设备中的页面最小可见区域宽度

示例:

1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个 and 连接后面的媒体功能,这里写的是 max-width:300px ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。

2、当文档宽度大于等于300px 的时候显示的样式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

注意,这里的媒体功能使用的是 min-width 而不是 max-width,我已经标红高亮显示出来了。

3、当文档宽度大于等于 300px 并且小于等于500px ( width >=300 && width <=500)的时候显示的样式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

注意,这里使用了两个 and ,用来连接 两个媒体功能,一个用于限制最小,一个用于限制最大。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css如何设置不同分辨率下的样式?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

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

前端开发相关广告投放 更专业 更精准

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏