要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器：

media的使用和规则：

　　①被链接文档将显示在什么设备上。

　　②用于为不同的媒介类型规定不同的样式。

语法：  @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

实例：

 /* 这是匹配横屏的状态，横屏时的css代码 */

 @media all and (orientation :landscape){}

 　　　　

 /* 这是匹配竖屏的状态，竖屏时的css代码 */

 　　　　

 @media all and (orientation :portrait){}

 @media X and (min-width:200px){}

 /*X为媒体类型--->比如print/screen/TV等等*/

 /* 宽度大于600px小于960之间时，隐藏footer结构 */

 @media all and (min-height:640px) and (max-height:960px){

    　　　footer{display:none;}

 }

在实际应用的时候，首先得在HTML的头文件<head>里上加入以下代码：

　　　 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

解释：　　　

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

因为media的类型很多，这里就发菜鸟教程的对应链接了：http://www.runoob.com/cssref/css3-pr-mediaquery.html

下面是media类型的screen（用于电脑屏幕，平板电脑，智能手机等）：

　　css自适应屏幕大小大方法：

 @media screen and (min-width: 320px) and (max-width: 1156px){

               .site-bg-dl {

               position: fixed;

               height: 100%;

               width: 100%;

               z-index:;

               background-image: url(bjxzfwzx/images/bj1.png);

               background-size: cover;

               background-repeat: no-repeat;

               background-attachment: fixed;

               background-size:100% 100%;

               -moz-background-size:100% 100%;

             }

 }

　　解释：

　　　　告诉浏览器当屏幕大于320px，并小于1156px下执行此代码；

　　在css中添加如下内容 可以分别定制不同屏幕的显示样式：　　　　

 /* 大屏幕 ：大于等于1200px*/

 @media (min-width: 1200px) { ... }

 /*默认*/

 @media (min-width: 980px){...}

 /* 平板电脑和小屏电脑之间的分辨率 */

 @media (min-width: 768px) and (max-width: 979px) { ... }

 /* 横向放置的手机和竖向放置的平板之间的分辨率 */

 @media (max-width: 767px) { ... }

 /* 横向放置的手机及分辨率更小的设备 */

 @media (max-width: 480px) { ... }

CSS 屏幕大小自适应的更多相关文章

  1. 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

    默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...

  2. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  3. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

  4. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  5. android系统如何自适应屏幕大小

    1.屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 android将屏幕大小分为四个级别 ...

  6. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  7. 利用onresize使得div可以随着屏幕大小而自适应的代码

    原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种 ...

  8. Android系统自适应屏幕大小

    1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...

  9. Unity3d发布成exe项目后的设置(全屏自适应屏幕大小)

    原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101gd46.html 1.  去除启动exe项目时出现的画面窗口 File ☞ Build Settings ...

随机推荐

  1. leanote 信息栏显示笔记本和笔记类型

    本文解决如下两个问题: 1. 在列表视图下使用搜索时,不知道搜出来的笔记属于哪个笔记本.(摘要视图下是有显示的) 2. 增加显示笔记类型(markdown 或 富文本) 修改resources\app ...

  2. ubuntu 安装 evpp

    ubuntu 安装 evpp 来源 https://www.cnblogs.com/wisdomyzw/p/9402440.html Ubuntu虚拟机安装开源库evpp说明: EVPP为奇虎360基 ...

  3. 使用 PHP SOAP 来创建一个简单的 Web Service。

    访问: http://www.debug.com/php-soap-demo.php?client=22 结果: apache: <VirtualHost _default_:80> Do ...

  4. 1.0--->刚开始看这里

    PyQt5使用笔记 创建一个小窗口 import sys from PyQt5.QtWidgets import * #程序实例化 app = QApplication(sys.argv) # #创建 ...

  5. 哈尔滨工程大学第十四届程序设计竞赛（同步赛）F 小帆帆走迷宫(dp)

    题目描述 小帆帆被困在一个 NxN 的方格矩阵迷宫,每个格子中都有一个整数 A[i][j].小帆帆从迷宫起点(左上角)格子 A[1][1]开始走,每一步可以向右或向下移动,目标是移动到迷宫的出口右下角 ...

  6. Ansible 插件 操作介绍

    一.Ansible 插件 之 [统计任务处理时间] 在做性能优化之前首先需要做的是收集一些统计数据,这样才能为后面做的性能优化提供数据支持,对比优化前后的结果.非常不错的是,在 github 发现一个 ...

  7. linux/ubantu 安装 mysql 并且使其支持远程连接

    前言:打开ubantu的 控制台 或者 远程连接到 ubantu的服务器  其他的 linux 基本类似 可能下载 方式稍微不同 开始吧! [第一步]首先是安装(目前是2019-4-9 默认安装的是 ...

  8. 支持向量机SVM原理_python sklearn建模乳腺癌细胞分类器（推荐AAA）

    项目合作联系QQ:231469242 sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?cours ...

  9. python正则表达式Re模块备忘录

    title: python正则表达式Re模块备忘录 date: 2019/1/31 18:17:08 toc: true --- python正则表达式Re模块备忘录 备忘录 python中的数量词为 ...

  10. mp的猜猜看

    ~~~~|yjb1072452141---dc9339b4c33103abc4919375203e7a24|A1482583628---0142e0b6090b9b2838328445a79cd1b8 ...