html自适应布局,@media screen,媒体查询

自适应代码示例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>响应式布局</title>
  6. <style type="text/css">
  7.  
  8. *{padding:0px; margin:0px; font-family:"微软雅黑";}
  9. #header{height:100px; border:solid 1px red; margin:0px auto;}
  10. #main{margin:10px auto; height:400px;}
  11. #footer{margin:0px auto; height:100px; border:solid 1px red;}
  12. /*屏幕宽度大于900的时候*/
  13. @media screen and (min-width:900px){
  14. #header,#footer{width:800px;}
  15. #main{width:800px; height:400px;}
  16. #main-left{width:200px; height:400px; border:solid 1px red; float:left;}
  17. #main-center{width:394px; height:400px; border:solid 1px red; float:left;}
  18. #main-right{width:200px; height:400px; border:solid 1px red;float:left;}
  19. }
  20. /*屏幕宽度大于600,小于900的时候*/
  21. @media screen and (min-width:600px) and (max-width:900px){
  22. #header,#footer{width:600px;}
  23. #main{width:600px; height:400px;}
  24. #main-left{width:200px; height:400px; border:solid 1px red; float:left;}
  25. #main-center{width:396px; height:400px; border:solid 1px red; float:left;}
  26. #main-right{display:none;}
  27. }
  28. /*屏幕宽度小于600的时候*/
  29. @media screen and (max-width:600px){
  30.  
  31. #header,#footer{width:300px;}
  32. #main{width:300px; height:400px;}
  33. #main-left{display:none;}
  34. #main-center{width:300px; height:400px; border:solid 1px red;}
  35. #main-right{display:none;}
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div id="header">头部</div>
  41. <div id="main">
  42. <div id="main-left">内容-左边</div>
  43. <div id="main-center">内容-中间</div>
  44. <div id="main-right">内容-右边</div>
  45. </div>
  46. <div id="footer">底部</div>
  47. </body>
  48. </html>

  

  1. /*外链接写法*/<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

  

1、在HTML头部增加viewport标签。

  在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则。

  例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

  3、布局宽度使用相对宽度。

  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

  4、页面使用相对字体(非必要)

  在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

  5、图片自适应(非必要)

  img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

  css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

html自适应布局,@media screen,媒体查询的更多相关文章

  1. @media screen媒体查询实现页面自适应布局

    @media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小 ...

  2. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  3. CSS3 之 Media(媒体查询器)

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  4. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

  5. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  6. bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

    响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...

  7. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  8. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  9. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  10. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

随机推荐

  1. Egret 工具推荐

    Egret 工具推荐--打造最好的开发环境--IDE篇http://bbs.egret.com/forum.php?mod=viewthread&tid=13581&fromuid=1 ...

  2. Python 中的垃圾回收机制(转载)

    from: https://foofish.net/python-gc.html GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来 ...

  3. zookeeper介绍以及安装配置

    Zookeeper启动时默认将Zookeeper.out输出到当前目录,不友好.改变位置有两种方法: 1:在当前用户下~/.bash_profile或在/etc/profile,添加ZOO_LOG_D ...

  4. Hibernate merge和update的区别

    今天做了个测试,写了个测试用例来看看merge与update时控制台打印出来的日志有什么不一样.实体bean很简单,就id和name两个字段,接下来分别给出以下几种测试情形的控制台日志内容: 1. 数 ...

  5. js中函数传参的情况

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Ansible develop module

    def cnf(action,configs,path): message = "Modify %s\n" %path changed = False if action == & ...

  7. Mysql 内部默认排序

    mysql默认的排序: https://forums.mysql.com/read.php?21,239471,239688#msg-239688 Do not depend on order whe ...

  8. VMware-克隆机,网卡修改

    1.克隆 2.修改网卡eth1为eth0 -persistent-net.rules 3.配置ip vim /etc/sysconfig/network-scripts/ifcfg-etho 4.修改 ...

  9. Django入门-框架目录介绍

    Django入门博客:https://www.cnblogs.com/chuangming/p/9076721.html#4098510 备注:使用 Django 框架之后,开发服务端方便了很多.我们 ...

  10. Maven常用命令及Eclipse应用

    一般来说,github上大多的java项目都是使用maven,ant等进行构建的.由于之前没有使用过maven,因此这几天对maven进行了简单的学习.古话说:“温故而知新”,一些命令长时间不使用都会 ...