CSS响应式布局学习笔记二

时间:2020-10-13 作者:WilliamChan

媒体查询应当怎么写呢?
一般我们CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式。

媒体查询 @media

媒体设备:all所有设备|screen所有屏幕设备(PC+移动端)|print打印机设备。
媒体条件:指定在什么样的条件下指定对应样式 。
方式一:(嵌入式css样式——不推荐的写法):

<style type="text/css">
@media screen and (max-width:768px){
//当屏幕宽度小于768px时,加载这里的样式
}
@media screen and (min-width:368px){
//当屏幕宽度大于368px时,加载这里的样式
}
@media screen and (min-width:300px) and (max-width:600px){
//当屏幕宽度大于300px且小于600px时,加载这里的样式
}
@media all and (-webkit-device-pixel-ratio:2){
//二倍屏
}
</style>

方式二:(外部式css样式)

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>

在真实项目中,设计师的设计稿一般是:640*1136640*960750*1334

CSS3中的媒体查询,可以在不同分辨率下对元素重新设置样式(不只是尺寸),在不同屏幕下可以显示不同版式。
@media screen and (min-width:480px) 手机
@media screen and (min-width:768px) 平板
@media screen and (min-width:992px) 桌面显示器
@media screen and (min-width: 1200px) 宽屏

这四个值是常用的,顺序一般是小的在前大的在后。
一些手机类型的分辨率
小米3      1080*1920
小米2      720*1280
红米Note      720*1280
魅族4      1152*1920
魅族3      1080*1800
魅族2      800*1280
iphone6      750*1334
iphone5s       640*1136
iphone4s       480*800
iphone3s      320*480
720*1280
480*800

虽然很多旧手机,但是现在很多新手机也是这样的分辨率,还能用。


以上就是知道不介绍的《CSS响应式布局学习笔记二》,希望对你有所帮助。

接下来您可以移步看一下一篇《CSS响应式布局学习笔记三》
或上一篇《CSS响应式布局学习笔记一》

声明:若您对本文内容有任何意见,欢迎发送邮件至:admin@zhidaobu.com,本站会尽快回应并做出相应处理。