关于响应式布局的相关介绍——和派孔明

最新推荐文章于 2021-11-23 16:52:49 发布

xyphf_和派孔明

最新推荐文章于 2021-11-23 16:52:49 发布

阅读量847

点赞数

分类专栏： HTML5 DOM&BOM操作兼容性解决 Java全栈之路文章标签：响应式布局移动互联网移动设备

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51902409

版权

DOM&BOM操作同时被 3 个专栏收录

64 篇文章

订阅专栏

Java全栈之路

55 篇文章

订阅专栏

HTML5

52 篇文章

订阅专栏

一、响应式布局简介
简单的讲，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。

二、响应式布局的优点
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

三、认识响应式布局
响应式布局又称之为媒体查询（Media Query），即通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

四、media query能够获取哪些值？
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

五、下面开始介绍响应式布局的语法结构
为了便于大家理解，我们一步步引入这种布局方式
@media only screen and (min-width:320px) and (max-widht:640px){
css选择器
}
min-width：最小宽度
max-width: 最大宽度
only：唯一
screen：屏幕
print:打印机
and: 条件 && 用来连接多个条件的

正常情况下(px)：
手机的宽度是[0,320]
pad的宽度[320,640]
PC的宽度[640,++]

例一：我们做如下设定，我们希望宽度小于320px时，div1显示红色，宽度在321-640px之间时，div1显示绿色，宽度大于641px时div显示黄色。那么我们可以这样写：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="和派孔明" />
<meta name="copyright" content="和派孔明" />
<title>和派孔明</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
/*
phone [0,320]    red
pad   [320,640]  green
pc    [640,++]   yellow

if (x < 320)
    x > 320 x < 640
    x > 640
*/

@media only screen and (max-width:320px){//当屏幕小于320px时
    #div1{background:red;}  
}
@media all and (min-width:321px) and (max-width:640px){//当屏幕位于321-640px之间时
    #div1{background:green;}    
}
@media (min-width:641px){//当宽度大于640px时
    #div1{background:yellow;}   
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

例二：鉴于例一的体验，我想大家应该对响应式布局有个大概的了解了
那么现在我们可以单独为每种设备终端写一套css，保存为单独的CSS文件，并且引进来
如下:

//phone.css
@charset "utf-8";
/* CSS Document */
#div1{background:red;}

//pad.css
@charset "utf-8";
/* CSS Document */
#div1{background:green;}

//pc.css
@charset "utf-8";
/* CSS Document */
#div1{background:yellow;}

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="和派孔明" />
<meta name="copyright" content="和派孔明" />
<title>和派孔明</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<style>
@import url("phone.css") only screen and (max-width:320px);
@import url("pad.css")  all and (min-width:321px) and (max-width:640px);
@import url("pc.css") (min-width:641px);
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

例三：关于例二的介绍，我想大家也都看明白了，但是正常情况下没有必要同时引入三个文件，那么在这期间我们可以架一座桥梁，如下：
首先还是给每个设备终端分别写一套样式，

//phone.css
@charset "utf-8";
/* CSS Document */
#div1{background:red;}

//pad.css
@charset "utf-8";
/* CSS Document */
#div1{background:green;}

//pc.css
@charset "utf-8";
/* CSS Document */
#div1{background:yellow;}

再写一个桥梁页，如下:

//media.css
@charset "utf-8";
/* CSS Document */
@import url("phone.css") only screen and (max-width:320px);
@import url("pad.css")  all and (min-width:321px) and (max-width:640px);
@import url("pc.css") (min-width:641px);

这个时候我们只要在HTML中引入media.css即可；
HTML部分如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="和派孔明" />
<meta name="copyright" content="和派孔明" />
<title>和派孔明</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<link rel="stylesheet" href="media.css" /> 
</head>
<body>
<div id="div1"></div>
</body>
</html>