要想实现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. ECMA262，JavaScript引擎，浏览器

    相关阅读:https://www.cnblogs.com/970119449blog/p/8080133.html 相关阅读:https://www.jb51.net/article/75888.ht ...

  2. Redis的两种持久化方式详细介绍

    一,Redis是一款基于内存的数据库,可以持久化,在企业中常用于缓存,相信大家都比较熟悉Redis了,下面主要分享下关于Redis持久化的两种模式 1.半持久化模式(RDB,filesnapshott ...

  3. LOJ#2665 树的计数

    题意:给你DFS序和BFS序,求树的期望高度. 解:先分析性质. 考虑到BFS序是分层的,DFS序的子树是一段,那么我们遍历BFS序并在DFS序上标记对应点的话,就会发现BFS序每一层都会把若干棵子树 ...

  4. Linux之 proc文件系统

    用户态与内核态交互的接口之一,管理方式与普通文件相同每个节点的文件权限(读/写)决定其查看和配置权限大量LINUX系统参数和状态信息可通过proc节点查看或配置/proc/<pid>/:查 ...

  5. 安装windows server 2008r2服务器操作系统

    R4900 G2 UEFI使用RAID-1000配置阵列 http://123.57.42.60/12755.html 首先进入到进到UEFI中阵列配置界面, 1Legacy BIOS Mode进入阵 ...

  6. R语言入门(1)-初识R语言

    设置R语言环境为英文环境 其实不设置也行...就是报错提示的内容是中文的话, 会不太好理解.. 1. 首先在用户根目录下cat查看一下, 发现没有.Renviron文件, 这个是R语言的环境配置文件. ...

  7. 【Unity游戏开发】tolua之wrap文件的原理与使用

    本文内容转载自:https://www.cnblogs.com/blueberryzzz/p/9672342.html .非常感谢原作者慷慨地授权转载,比心!@blueberryzzz 是位大神,欢迎 ...

  8. java压缩文件或文件夹并导出

    java压缩文件或文件夹并导出 tozipUtil: package com.zhl.push.Utils; import java.io.File; import java.io.FileInput ...

  9. centos7安装与配置nginx1.11，开机启动

    1.官网下载安装包 http://nginx.org/en/download.html,选择适合Linux的版本,这里选择最新的版本,下载到本地后上传到服务器或者centos下直接wget命令下载. ...

  10. 《Java》第五周学习总结20175301

    https://gitee.com/ShengHuoZaiDaXue/20175301.git 本周我学习了第六章的内容接口 重要内容有 理解接口 接口参数 面向接口编程 abstract类与接口的比 ...