第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。

第二步，在Body标签里添加三个主DIV标签，分别表示头部，内容和底部。然后，在内容DIV内又添加三个子DIV,分别表示左边，中间，右边。并且给出对应的ID名。对应的代码如下：
<body>
  <div id="header">头部</div>
  <div id="main">
     <div id="main-left">内容-左边</div>
     <div id="main-center">内容-中间</div>
     <div id="main-right">内容-右边</div>
  </div>
  <div id="footer">底部</div>
</body>

第三步， 接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加<style>标签，在里面写CSS代码（当然，也可以将CSS代码写在单独的.CSS文件中，然后引用）。首先设置全局样式，当屏幕宽度大于900px的时候，即大型电脑PC端，对应的头部，尾部，内容的CSS代码，对应的代码如下：

*

{

padding:0px;

margin:0px;

font-family:"微软雅黑";

}

#header

{

height:100px;

border:solid 1px red;

margin:0px auto;

}

#main

{

margin:10px auto;

height:400px;

}

#footer

{

margin:0px auto;

height:100px;

border:solid 1px red;

}

第四步，当屏幕最小宽度为900px时，相当于笔记本PC端，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (min-width:900px)
{
    #header,#footer
    {
        width:800px;
    }
    #main
    {
        width:800px;
        height:400px;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;  /*以下均要设置左浮动，保证在同一行*/
    }
    #main-center
    {
        width:394px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}

第五步，当屏幕宽度在600~900px时，相当于平板电脑大小的设备，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left; /*以下均要设置左浮动，保证在同一行*/
    }
    #main-center
    {
        width:396px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none; /*隐藏内容右边*/
    }
}

第六步， 写当屏幕宽度在小于等于600px时，即在移动端（手机端），其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;
    }
    #main-left
    {
        display:none; /*隐藏内容左边*/
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;  /*隐藏内容右边*/
    }
}

最后说一下，其实也就相当于判断语句，判断屏幕宽度根据屏幕的宽度来设置相应的宽度，这里设置宽度个人写完后觉得用百分比来设置其实还要简单点，看情况吧。

=。=

html自己写响应式布局（说起来很高大上的样子，但是其实很简单）的更多相关文章

  1. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  2. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  3. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  4. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  5. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. 响应式布局（Responsive layout，RL）的简单Demo

          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...

  7. SharePoint 2013 的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  8. Bootstrap页面布局5 - 响应式布局(格式)

    旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...

  9. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

随机推荐

  1. LOG.ZS.0001.基于Freetype的游戏字体渲染优化思路

    Total Utf8-ucs2 Html_parse Layout Render_string Init_texture Ft_load_glyph 原始 2293 1 26 708 1556 2 1 ...

  2. 一梦浮生2012 IOS高级进阶目录

    一梦浮生2012 精通iphone的UI开发,能熟练操作复杂表视图,熟练使用图层技术, 可以自定义UI控件,使用类别扩展系统控件功能; 擅长通讯技术,熟悉各种通信协议,精通xml, json, 二进制 ...

  3. .NETFramework：Stream

    ylbtech-.NETFramework:Stream 1.返回顶部 1. #region 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, Publi ...

  4. mounted

    注意 mounted 不会承诺所有的子组件也都一起被挂载.如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted: mounted: function () { t ...

  5. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  6. UI：KVO、KVC

    什么是KVC 什么是 KVO ? KVC:(NSKey ValueCoding)”键-值  编码“是一种间接的访问对象属性(字符串表征)的机制.对象的属性都可以通过使用KVC机制用相同的方式访问.我们 ...

  7. 数据库几种Top子句的使用方法

    转自:https://blog.csdn.net/melody_susan/article/details/47011331

  8. (转载) 上传文件进度事件,进度事件(Progress Events)

    转载URL:https://www.w3cmm.com/ajax/progress-events.html MDN参考:https://developer.mozilla.org/zh-CN/docs ...

  9. Spring Boot 学习系列（序）—Spring Boot

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot? Spring Boot 是由pivotal团队提供的一个基于Spring的全新框架 ...

  10. 51nod 1138 【数学-等差数列】

    思路: 很显然每个连续的序列都是等差数列, 那么我们利用等差数列求和公式. S=(a1+a1+k-1)k/2=(2·a1+k-1)*k/2;a1是首项,k是个数. 枚举k,首项最小为1,k最大,具体不 ...