要想实现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. 使用linux backtrace打印出错函数堆栈信息

    一般察看函数运行时堆栈的方法是使用GDB(bt命令)之类的外部调试器,但是,有些时候为了分析程序的BUG,(主要针对长时间运行程序的分析),在程序出错时打印出函数的调用堆栈是非常有用的. 在glibc ...

  2. docker 镜像备份magento 2.2.3

    打包百度网盘: 链接:https://pan.baidu.com/s/1i_lSLt48RlxPonVA7qG5kg  密码:h1de 还原:docker load < (filename).t ...

  3. Git中.gitignore文件不起作用的解决以及Git中的忽略规则介绍

    在Studio里使用Git管理代码的过程中,可以修改.gitignore文件中的标示的方法来忽略开发者想忽略掉的文件或目录,如果没有.gitignore文件,可以自己手工创建.在.gitignore文 ...

  4. OMS自动化运维平台部署

    OMS自动化运维平台部署 一.基础环境安装 yum -y install mariadb mariadb-devel mariadb-server wget epel-release python-d ...

  5. UOJ 7 NOI2014 购票

    题意:给一棵树计算一下各个点在距离限制下以一定的费用公式通过不停地到祖先最后到达一号点的最小花费. 第一种做法:线段树维护带修凸壳.显然的,这个公式计算是p*x+q 所以肯定和斜率有关系.然后这题的d ...

  6. 爬虫四大金刚：requests，selenium，BeautifulSoup，Scrapy

    一.简介爬虫 1.什么是爬虫 #1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样. #2.互联网建立的目的? 互联网的核心价值在于数据的共 ...

  7. thinkphp5 去除缓存

    array_map('unlink', glob(TEMP_PATH . '/*.php')); rmdir(TEMP_PATH);

  8. Linux记录-sftp上传大文件

    1.Alt +P 进入sftp会话 2.pwd显示linux目录 lpwd显示windows目录 3.lcd切换windows目录 cd切换linux目录 4.put上传 5.get下载 6.help ...

  9. 081、Weave Scope 多主机监控（2019-04-29 周一）

    参考https://www.cnblogs.com/CloudMan6/p/7674011.html   Weave Scope 除了监控容器,还可以监控Docker Host.   点击顶部 HOS ...

  10. SQL SERVER服务器登录名、角色、数据库用户、角色、架构的关系

    原创链接:https://www.cnblogs.com/junfly/articles/2798023.html SQL SERVER 基础教程中关于服务器登录名.服务器角色.数据库用户.数据库角色 ...