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;}
##对称加密算法 在对称加密算法中，数据发信方将明文（原始数据）和加密密钥一起经过特殊加密算法处理后，使其变成复杂的加密密文发送出去。收信方收到密文后，若想解读原文，则需要使用加密用过的密钥及相同算法的逆算法对密文进行解密，才能使其恢复成可读明文。在对称加密算法中，使用的密钥只有一个，发收信双方都使用这个密钥对数据进行加密和解密，这就要求解密方事先必须知道加密密钥。 ##常
##信息安全领域，渗透测试，漏扫，加固，逆向分别指什么 **渗透测试（Penetration Testing）**：渗透测试是一种针对计算机系统、网络或应用程序的安全评估方法。通过模拟攻击者的行为，渗透测试专家试图利用系统的漏洞或弱点来获取未经授权的访问权限，以评估系统的安全性，并提供改进建议。 **漏洞扫描（Vulnerability Scanning）**：漏洞扫描是通过自动化工具检测计算机
##公共采购方式 公共采购一般包含以下几种方式： **公开招标**：这是最常用的一种采购方式，通过发布公告，邀请所有潜在的供应商参加竞争。招标人从应答人中择优选择中标（成交）供应商。这种方式的优势在于具有公开性和竞争性，可以降低采购成本，提高采购效率。 **邀请招标**：也称为有限竞争，这种方式不是对所有供应商开放，而是邀请少数特定的供应商参加竞争。这种方式的优点是节约
1、公共采购方式(1) 公开招标：公开招标是最常见的招标方式，采购方在公共平台发布招标信息，符合条件的供应商都可以参与投标。公开招标的优点是投标人较多、竞争充分、不容易出现串标、围标等情况。 (2) 邀请招标：邀请招标是指采购人依法从符合相应资格条件的供应商中随机邀请3家以上供应商，并以投标邀请书的方式邀请其参加投标。这种方式是非公开性质的，通常适用于国家重点项目或国有资金占控
C语言实现冒泡排序 1、升序排序： void asc(int *a,intn){ int i=0,j=0; for( i=0;i<n-1;i++){ for(j=0;j<n-1;j++){
##原理 对数组进行遍历，每次对相邻两个进行比较大小，若大的数值在前面则交换位置（升序），完成一趟遍历后数组中最大的数值到了数组的末尾位置，再对前面n-1个数值进行相同的遍历，一共完成n-1次遍历就实现了排序完成，时间复杂度是O(n^2)，空间复杂度O(1)。 ##代码实现 ###C语言 ```C #include void bubble_sort(int arr[],
1. 使用 C语言开发的软件，一般情况下要如何测试?C语言开发完成的软件，主要执行一下步骤完成测试：(1)需求分析：首先明确软件的需求和功能，确保测试团队对软件的功能和目标有清晰的理解。(2)制定测试计划：根据需求分析，制定详细的测试计划，包括测试的目标、范围、资源、时间表等。(3)创建测试环境：准备测试所需的硬件、软件和网络环境，确保测试环境与实际运行环境相似。(4)编写测试用例：根据
##什么是系统测试，C 语言的系统测试有哪些方法？ 系统测试是软件开发过程中的一种测试方法，旨在验证整个软件系统的功能、性能和稳定性，以确保软件在实际环境中正常工作。 在C语言中，系统测试的方法可以有以下几种： 单元测试(Unit Testing)：对程序中的每个函数或模块进行测试，确保其独立的功能正确实现。可以使用测试框架如Google T
##Nginx 轻量级，采用 C 进行编写，同样的 web 服务，会占用更少的内存及资源； 抗并发，nginx 以 epoll and kqueue 作为开发模型，处理请求是异步非阻塞的，负载能力比；apache 高很多，而 apache 则是阻塞型的。在高并发下 nginx 能保持低资源低消耗高性能 ，而 apache 在 PHP 处理慢或者前端压力很大的情况下，很容易出现进程数飙升，从而拒绝服
1、简述面向对象编程和面向过程编程，区别面向对象（OOP）：以对象为核心的编程方式，程序的主体是对象，对象具有属性和方法的实体，通过对象之间进行操作完成交互，通过定义类，可以创建多个对象实例，它的基本特征有三：封装性、继承性和多态性。封装是指将对象的属性和方法封装在类中，外部不能直接访问，内部访问时，调用其方法类方法就可以，继承是可以从已有的类派生出新的类，并且可以获取父类的属性和方法，多态是指统
## vue ### 特点 Vue 是一个以数据驱动视图的轻量级渐进式 MVVM 框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，所以其核心是一个响应的数据绑定系统。 **注**：*数据驱动视图: 常规的 js 都是操作 dom 来开发程序，代表者 jquery ，而Vue 不用直接操作 dom，是用数据来控制元素的变化。
一、列举你熟悉的三个前端框架，简述优缺点和特点。 答： Vue ： Vue 是尤雨溪编写的一个构建数据驱动的 Web 界面的库，准确来说不是一个框架，它聚焦在 V （ view ）视图层。