大同微信公众号开发【大同网络推广】大同建站、大同网站维护、大同网页制作、大同微信小程序代运营公司

发表日期： 2021-05-21 15:51:20 浏览次数：129

网站建设.jpg

大同，古称云中、平城，是山西省地级市，国务院批复确定的中国晋冀蒙交界地区中心城市之一、重要的综合能源基地 [1] 。截至2018年，全市下辖4个区、6个县，总面积14176平方千米，建成区面积202.74平方千米，常住人口346.30万人，城镇人口227.23万人，城镇化率65.62%。 [2]

大同地处中国华北地区、山西北部、大同盆地中心、晋冀蒙三省区交界处、黄土高原东北边缘，实为全晋之屏障、北方之门户，且扼晋、冀、内蒙之咽喉要道，北隔长城与内蒙古自治区乌兰察布市接壤 [3] ，是山西省省域副中心城市，历代兵家必争之地，有“北方锁钥”之称。 [4] 大同是首批国家历史文化名城之一、曾是北魏首都，辽、金陪都，境内古迹众多，著名的文物古迹包括云冈石窟、华严寺、善化寺、恒山悬空寺、九龙壁等 [4] ，是中国首批13个较大的市之一、中国九大古都之一、国家新能源示范城市、中国优秀旅游城市、国家园林城市 [5] 、全国双拥模范城市、全国性交通枢纽城市、中国雕塑之都、中国十佳运动休闲城市。

大同是中国最大的煤炭能源基地之一，国家重化工能源基地，神府、准格尔新兴能源区与京津唐发达工业区的中点。素有“凤凰城”和“中国煤都”之称。 2019年8月13日，入选全国城市医疗联合体建设试点城市。 [6]

2019年，大同市地区生产总值实现1318.8亿元，按不变价格计算，比上年增长6.7%。 [2]

因为当今手机和平板的不断流行，使前端技术人员不得不考虑网站对于这些电子设备的展现效果。而传统的写法，貌似已经不适应了这种发展。于是出来一个新潮的词语“响应式”，实现响应式设计的主要途径是使用 CSS 媒体查询。其实从css2版本开始，就可以通过媒体类型在 CSS 中获得媒体支持。它可以将我们的网站，在不同的分辨率中而展示不同的布局样式。进而提高较好的用户体验。这篇文章，我就带着各位一起来探讨媒体查询的用法和效果吧！

媒体查询规则

@media all and (min-width: 800px) { ... }

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

简单的写法：

@media (min-width:800px) { ... }

复杂表达式:

@media (min-width:800px) and (max-width:1200px) { ... }

如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式

使用not:

@media (not min-width:800px) { ... }

当最小宽度不是 800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等

不带 min- 和 max- 前缀:

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时。现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。

媒体查询的使用
首先我写了一段简单的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.demo{width:1000px; margin:0 auto;}
.demo .test{ width:100%; text-align:center; color:red; font-size:40px; font-weight:bold;}
</style>
</head>

<body>
<div class="demo">
    <div class="test">
        1515
    </div>
</div>
</body>
</html>

效果如下：

这是在578分辨率情况下显示的。显然这个是不自适应屏幕的，因为css demo的定义就已经注定了他的固定宽度一定是1000。于是我们添加下媒体css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.demo{width:1000px; margin:0 auto;}
.demo .test{ width:100%; text-align:center; color:red; font-size:40px; font-weight:bold;}
@media screen and (max-width:620px){
    .demo{ width:100%;}
    .demo .test{ color:blue; font-size:18px;}
    }
</style>
</head>

<body>
<div class="demo">
    <div class="test">
        1515
    </div>
</div>
</body>
</html>

我们首先判断小于620宽度的时候， demo宽度改变为100%。然后再改变test的颜色和字体。我们再来看下效果

虽然是个小小的例子。但我们可见上图其实已经实现了自适应的一个功能。希望大家可以举一反三。

媒体查询的效果如下图
(电脑版)

（平板版）

(手机端)

大家在使用的时候，可以提前在新建文档中练练手。我上面所述的媒体查询规则只是部分。一些不常用的，我没有写出来。更详细的资料可以参考他们的官方网站：http://www.ibm.com/developerworks/cn/web/wa-cssqueries/

大同微信公众号开发【大同网络推广】大同建站、大同网站维护、大同网页制作、大同微信小程序代运营公司

上一页：大同网站制作【大同网站优化】大同建网站、大同微信公众号运营、大同网页设计、大同微信小程序商城

下一页：大同网站推广【大同办理400电话】大同SEO优化、大同微信公众号APP客户端小程序开发、大同网站托管、大同APP开发