• 讲政德如何落到实处(专家观点) 2019-10-18
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-10-14
  • 吉祥法师:什么才是“相由心生”?了解一下 2019-10-14
  • 乌兰察布--内蒙古频道--人民网 2019-10-12
  • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-10-12
  • 回复@老老保老张工:三大件为什么会让人自豪?因为你有钱都买不到,必须找关系批条子!所以结婚能有三大件,不仅表示有钱,还表示有关系。 2019-10-05
  • 致父亲——习近平与父亲的家国情 2019-10-04
  • 高清:葡萄牙明晨对阵西班牙 C罗领衔球队认真备战 2019-10-04
  • 明年起全国将全面供应“国六”汽柴油 2019-10-02
  • 流溪河森林公园美不胜收 2019-09-30
  • “工会是下岗职工真正的‘娘家’” 2019-09-30
  • 弘扬红船精神 当好勇立潮头城建排头兵 2019-09-27
  • ofo宣布全面取消免押金 还被曝出存在霸王条款 2019-09-27
  • 国务院关税税则委员会办公室有关负责人对自美部分进口商品加征关税的解读 2019-09-26
  • 3898元起vivo NEX发布:升降式前置镜头,正面全是屏幕 2019-09-26
  • 15选5走势图
    电话:13843226952
     
    工作时间:周一至周六:8:30-5:00  周日可联系客服QQ
       
      建站咨询㈠ 建站咨询㈡ 售后服务 售前咨询  
    关于阳光,吉林市网站建设,吉林市网站制作,网络公司
     当前位置:15选5走势图 >>> 网站优化

    新疆风采35选7基本走势图:使用CSS3 实现网页自适应

    日期:2016/11/16    来自:15选5走势图   作者:Admin   去百度查找  去Google查找

    15选5走势图 www.kdth.net 当今屏幕分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。

    概述

    当屏幕分辨率大于1024px时,网页宽度将会是980px。用CSS3媒体查询(Media query)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取代固定宽度;如果小于650px,主题和边栏(content container and sidebar )将会撑满屏幕并一列显示。

    HTML 代码

    以下只是代码的主题结构,我用了“pagewrap”容器封装 “header”, “content”, “sidebar”, 和 “footer” together.

    <div id=”pagewrap”>
      <header id=”header”>
        <hgroup>
          <h1 id=”site-logo”>Demo</h1>
          <h2 id=”site-description”>Site Description</h2>
        </hgroup>
        <nav>
          <ul id=”main-nav”>
            <li>
              <a href=”#”>Home</a></li>
          </ul>
        </nav>
        <form id=”searchform”>
          <input type=”search”>
        </form>
      </header>
      <div id=”content”>
        <article>blog post</article>
      </div>
      <aside id=”sidebar”>
        <section>widget</section>
      </aside>
      <footer id=”footer”>footer</footer>
    </div>
    HTML5.js

    请注意上面我用了html5,但低于IE9版本IE浏览器并不支持<header>, <article>, <footer>, <figure>等html5标签,现在用js脚本来让它们支持。

    <!–[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]–>
    CSS

    把HTMl5元素定义成块(display: block;)

    下面将会用CSS吧HTML5元素 (article, aside, figure, header, footer等)定义成块

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {display: block;}
    主体结构的CSS样式

    “pagewrap”容器宽度为980px,header高度为160px.”content”容器宽600px且向左浮动,边栏”sidebar”宽280px并向右浮动。

    #pagewrap {width: 980px;margin: 0 auto;}
    #header {height: 160px;}
    #content {width: 600px;float: left;}
    #sidebar {width: 280px;float: right;}
    #footer {clear: both;}
    第一步效果预览

    第一步演示:点击我。注意现在还不能自适应,改变浏览器宽度后网页结构并不会跟着改变。

    CSS3媒体查询(CSS3 Media Query)

    媒体查询脚本(Media Queries Javascript)

    IE8或者更低的版本不支持CSS3媒体查询,但通过添加脚本 css3-mediaqueries.js来实现这一功能。

    <!–[if lt IE 9]>
    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]–>
    媒体查询CSS(Media Queries CSS)

    为媒体查询创建新的CSS样式表,媒体查询如何工作请查看我以前的教程(media queries )

    <link href="media-queries.css" rel="stylesheet" type="text/css">
    分辨率小于980px(流动布局)

    当屏幕分辨率小于980px时,以下规则将会执行:

    pagewrap = 宽 95%
    content = 宽60%
    sidebar = 宽 30%
    @media screen and (max-width: 980px) {
    #pagewrap {width: 95%;}
    #content {width: 60%;padding: 3% 4%;}
    #sidebar {width: 30%;}
    #sidebar .widget {padding: 8% 7%;margin-bottom: 10px;}
    }
    分辨率小于650px(一列布局)

    当屏幕分辨率小于650px时,以下规则将会执行:

    header =宽度为自动(auto)
    searchform =搜索框距顶部5px(re-position the searchform to 5px top)
    main-nav = 静态布置
    site-logo = 静态布置
    site-description = 静态布置
    content = 宽度为自动并取消浮动
    sidebar = 宽度为100%并取消浮动
    @media screen and (max-width: 650px) {

    #header {height: auto;}
    #searchform {position: absolute;top: 5px;right: 0;}
    #main-nav {position: static;}
    #site-logo {margin: 15px 100px 5px 0;position: static;}
    #site-description {margin: 0 0 15px;position: static;}
    #content {width: auto;float: none;margin: 20px 0;}
    #sidebar {width: 100%;float: none;margin: 0;}

    }
    分辨率小于480px

    下面是小于480px时的CSS规则,主要针对iPhone

    html = 取消文字尺寸样式。默认情况下iPhone会自动调整到适合,你可以通过添加” -webkit-text-size-adjust: none;”来取消自动调整。
    main-nav = 文字尺寸为90%
    @media screen and (max-width: 480px) {
    html {-webkit-text-size-adjust: none;}
    #main-nav a {font-size: 90%;padding: 10px 8px;}
    }
    图片的灵活显示

    为了让图片显示更加灵活,只需设置 max-width:100% 和 height:auto。然而 max-width:100% 和 height:auto在IE7中运行,但不能在IE8中运行(诡异的BUG?。?,所以需要为IE8添加width:auto\9。

    img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}
    嵌入类视频的灵活显示

    为了让嵌入视频显示更加灵活,需要用上面同样的方法。不知道是什么原因, max-width:100% (仅仅是视频时)不能被Safari识别,此时要用 width:100%代替

    .video embed,.video object,.video iframe {width: 100%;height: auto;}
    初始化MeTa标签 Initial Scale Meta Tag (iPhone)

    默认情况下,iPhone的Safari浏览器会自动缩小页面来显示,下面来使用Meta标签让网页字节按CSS样式显示。

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    最终预览

    改变你的浏览器宽度将会看到媒体查询让版式的变化,别忘了在其他设备上检验这一效果。

     
    上一篇:SQL常用查询语句
    下一篇:什么是网站
      阳光新闻 更多>>>
    吉林网站建设_吉林网页制作-阳光新闻
    移动建站的优势在哪?
    如何规划网站的主题
    网站优化注意事项
    网站建设的趋势
    网站建设对企业发展有哪些助力
    小程序未来的市场前景
      招贤纳士 更多>>>
    诚聘销售精英合作伙伴
    诚招吉林市网站建设商务经理
    招聘吉林市网站建设技术员
    公司招收吉林市网站开发学员
    因业务发展需要特诚聘商务代表
      网站建设专题 更多>>>
    阳光科技为您提供网站改版服务
    为什么网页设计要简练?
    如何在百度提交收录,怎样让自己的网站排名
    什么样的网站最受访客喜欢?
    吉林市网站建设形式与内容应统一
    网站管理与团队经营的秘诀
    优质的单页网站如何创建
     
    Copyright © 2008-2019 15选5走势图, All Rights Reserved    
    电话:13843226952  联系人:王经理
    ICP备案号:吉ICP备10003760号   技术支持:15选5走势图
    打造好的15选5走势图!我们为您提供有品质的15选5走势图、15选5走势图、15选5走势图、15选5走势图、15选5走势图、15选5走势图服务!
  • 讲政德如何落到实处(专家观点) 2019-10-18
  • 解读习近平八一讲话:铭记辉煌历史 推进强军事业 2019-10-14
  • 吉祥法师:什么才是“相由心生”?了解一下 2019-10-14
  • 乌兰察布--内蒙古频道--人民网 2019-10-12
  • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-10-12
  • 回复@老老保老张工:三大件为什么会让人自豪?因为你有钱都买不到,必须找关系批条子!所以结婚能有三大件,不仅表示有钱,还表示有关系。 2019-10-05
  • 致父亲——习近平与父亲的家国情 2019-10-04
  • 高清:葡萄牙明晨对阵西班牙 C罗领衔球队认真备战 2019-10-04
  • 明年起全国将全面供应“国六”汽柴油 2019-10-02
  • 流溪河森林公园美不胜收 2019-09-30
  • “工会是下岗职工真正的‘娘家’” 2019-09-30
  • 弘扬红船精神 当好勇立潮头城建排头兵 2019-09-27
  • ofo宣布全面取消免押金 还被曝出存在霸王条款 2019-09-27
  • 国务院关税税则委员会办公室有关负责人对自美部分进口商品加征关税的解读 2019-09-26
  • 3898元起vivo NEX发布:升降式前置镜头,正面全是屏幕 2019-09-26
  • 双色球怎么算中奖 ktv消防应急预案范文 足球竞彩app哪个靠谱 天津快乐十分20选8 组六复式稳赚法 重庆快乐10分o9期开什么l 二八杠棋牌娱乐 25选7开奖结果查询 鹤山市福利彩票中心 凤凰娱乐平台客服 浙江飞鱼外围秘诀 腾讯彩票合法吗 辛运28 江苏e球彩总进球数图 澳洲幸运5毒胆公式