HTML和CSS适应不同终端屏幕的实现（附typecho CSS文件）

HTML和CSS适应不同终端屏幕的实现（附typecho CSS文件）

DATE: 2017-09-26 21:08:41

C/S架构已然渐渐落伍，为了追赶时代的潮流，我也赶紧来学习下B/S架构。

BS架构最强大的地方是只需要开发处理业务逻辑的Server，而Client端只需要使用浏览器或APP就可惜读取Server 信息。而如今的APP，以Android 为例，完全可以通过只加个Android APP的壳去读取HTML来实现。

但同样的页面前端工程师是怎么做到适应不同的终端的呢？我这里有一个简单的例子。

先看HTML代码，这里是一个img的div，功能是加载一张图片。

<div class="img"> <img src="./job/imgs/growup_timeline.png" alt="Forest" width="614" height="261"> </div>

以下是CSS代码，先将各终端下统一的风格代码提取出来。

这里有点C++或Java等开发语言中父类的意思。

div.img {
border: 1px solid #ccc;
width: 614px;
height: 261px;
}

然后，针对不同屏幕大小的终端，分情况进行处理。 继承父类特性的子类 不同的屏幕大小，用min-windth和max-width来区分，分为是小于600，600到1200之间，以及大于1200。（单位：像素）

@media (min-width:1200px) {
div.img {
float:right;
}
}

@media (min-width:600max-width:1200px) { div.img { float:top; } }

@media (max-width:600px) { div.img { float:left; } }

这样，在不同的屏幕宽度下，界面会有相应的变化。怎么样？是不是超级简单？

附typecho的默认CSS文件。是可以区分不同终端的，可通过查找@media分析学习本文件。

body{background-color:#FFF;color:#444;font-family:"Droid Serif",Georgia,"Times New Roman",STHeiti,serif;font-size:87.5%;}a{color:#3354AA;text-decoration:none;}a:hover,a:active{color:#444;}pre,code{background:#F3F3F0;font-family:Menlo,Monaco,Consolas,"Lucida Console","Courier New",monospace;font-size:.92857em;}code{padding:2px 4px;color:#B94A48;}pre{padding:0;border:1px solid #ccc;overflow:auto;max-height:400px;}pre code{padding:3px;color:#444;}blockquote{margin:1em 1.5em;padding-left:1.5em;border-left:4px solid #F3F3F0;}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}input[type="text"],input[type="email"],input[type="url"],input[type="password"],textarea{padding:5px;border:1px solid #E9E9E9;width:100%;border-radius:2px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}textarea{resize:vertical;}.post-meta a,.post-content a,.widget a,.comment-content a{border-bottom:1px solid #EEE;}.post-meta a:hover,.post-content a:hover,.widget a:hover,.comment-content a:hover{border-bottom-color:transparent;}.browsehappy{padding:8px 0;background:#FBE3E4;color:#8A1F11;text-align:center;}.browsehappy a{color:#8A1F11;text-decoration:underline;font-weight:bold;}#header{padding-top:35px;border-bottom:1px solid #EEE;}#logo{color:#333;font-size:2.5em;}.description{margin:.5em 0 0;color:#999;font-style:italic;}#nav-menu{margin:25px 0 0;padding:0;}#nav-menu a{display:block;margin-right:-1px;padding:0 20px;border:1px solid #EEE;border-bottom:none;height:32px;line-height:32px;color:#444;float:left;}#nav-menu a:hover,#nav-menu .current{background:#F6F6F6;}#search{position:relative;margin-top:15px;}#search input{padding-right:30px;}#search button{position:absolute;right:4px;top:2px;border:none;padding:0;width:24px;height:24px;background:transparent url(img/icon-search.png) no-repeat center center;direction:ltr;text-indent:-9999em;}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){#search button{background-image:url(img/icon-search@2x.png);-webkit-background-size:24px 24px;-moz-background-size:24px 24px;-o-background-size:24px 24px;background-size:24px 24px;}}.post{padding:15px 0 20px;border-bottom:1px solid #EEE;}.post-title{margin:.83em 0;font-size:1.4em;}.post-meta{margin-top:-0.5em;padding:0;color:#999;font-size:.92857em;}.post-meta li{display:inline-block;margin:0 8px 0 0;padding-left:12px;border-left:1px solid #EEE;}.post-meta li:first-child{margin-left:0;padding-left:0;border:none;}.post-content{line-height:1.5;}.post .tags{clear:both;}.post-near{list-style:none;margin:30px 0;padding:0;color:#999;}.post-near li{margin:10px 0;}.archive-title{margin:1em 0 -1em;padding-top:20px;color:#999;font-size:1em;}.more{text-align:center;}.more a{border:none;}.protected .text{width:50%;}.page-navigator{list-style:none;margin:25px 0;padding:0;text-align:center;}.page-navigator li{display:inline-block;margin:0 4px;}.page-navigator a{display:inline-block;padding:0 10px;height:30px;line-height:30px;}.page-navigator a:hover{background:#EEE;text-decoration:none;}.page-navigator .current a{color:#444;background:#EEE;}#comments{padding-top:15px;}.comment-list,.comment-list ol{list-style:none;margin:0;padding:0;}.comment-list li{padding:14px;margin-top:10px;border:1px solid #EEE;}.comment-list li.comment-level-odd{background:#F6F6F3;}.comment-list li.comment-level-even{background:#FFF;}.comment-list li.comment-by-author{background:#FFF9E8;}.comment-list li .comment-reply{text-align:right;font-size:.92857em;}.comment-meta a{color:#999;font-size:.92857em;}.comment-author{display:block;margin-bottom:3px;color:#444;}.comment-author .avatar{float:left;margin-right:10px;}.comment-author cite{font-weight:bold;font-style:normal;}.comment-list .respond{margin-top:15px;border-top:1px solid #EEE;}.respond .cancel-comment-reply{float:right;margin-top:15px;font-size:.92857em;}#comment-form label{display:block;margin-bottom:.5em;font-weight:bold;}#comment-form .required:after{content:" *";color:#C00;}#secondary{padding-top:15px;word-wrap:break-word;}.widget{margin-bottom:30px;}.widget-list{list-style:none;padding:0;}.widget-list li{margin:5px 0;line-height:1.5;}.widget-list li ul{margin-left:15px;}#footer{padding:3em 0;line-height:1.5;text-align:center;color:#999;}.error-page{margin-top:100px;margin-bottom:100px;}.post-content,.comment-content{line-height:1.5;word-wrap:break-word;}.post-content h2,.comment-content h2{font-size:1.28571em;}.post-content img,.comment-content img,.post-content video,.comment-content video{max-width:100%;}.post-content a img,.comment-content a img{background:#FFF;position:relative;bottom:-4px;}.post-content hr,.comment-content hr{margin:2em auto;width:100px;border:1px solid #E9E9E9;border-width:2px 0 0 0;}.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto;}.alignleft{float:left;}.alignright{float:right;}img.alignleft{margin:0 15px 0 0;}img.alignright{margin:0 0 0 15px;}@media(max-width:767px){body{font-size:81.25%;}#nav-menu a{float:none;display:inline-block;margin:0 -2px;}}@media(max-width:768px){#header,.post-title,.post-meta{text-align:center;}}@media(min-width:1200px){.container{max-width:952px;}}.hidden{display:none!important;visibility:hidden;}.sr-only{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}.invisible{visibility:hidden;}