要想实现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. AVIER Racing Drone App Privacy Policy

    Personal Data collected for the following purposes and using the following services: Device permissi ...

  2. 「洛谷3870」「TJOI2009」开关【线段树】

    题目链接 [洛谷] 题解 来做一下水题来掩饰ZJOI2019考炸的心情QwQ. 很明显可以线段树. 维护两个值,\(Lazy\)懒标记表示当前区间是否需要翻转,\(s\)表示区间还有多少灯是亮着的. ...

  3. noi.ac89A 电梯

    题目 思路 首先按照\(t\)排序!!!! 首先考虑一个暴力\(dp\) 用\(f[i]\)表示前\(i\)个人到达地点所需要的时间. 那么就有如下的转移 \[f_i = min_{1 \le j \ ...

  4. P1996 约瑟夫问题-题解（队列？？明明是单循环链好吗）

    一如既往的题目传送:     https://www.luogu.org/problemnew/show/P1996 这里不讲数组模拟的方法(毕竟多做点题的模拟功力足以暴力出这道题),而是讲一种单循环 ...

  5. MySQL 主从复制实战解析

    前言:前面几篇文章讲解了在应用层读写分离的配置和使用,这篇文章将来个主从复制的实战解析. 说明:主从复制,读写分离结构图 原理图 主库生成一个线程: Binlog Dump线程 1.此线程运行在主库, ...

  6. JavaScript DOM 高级程序设计读书笔记二

    响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...

  7. laravel安装nova 运行php artisan migrate出错

    报错一$ php artisan migrate Illuminate\Database\QueryException : could not find driver (SQL: select * f ...

  8. Event filter with query "SELECT * FROM __InstanceModi

    Event filter with query "SELECT * FROM __InstanceModi     问题描述: Details -Event filter with quer ...

  9. 自搭的一个系统框架，使用Spring boot+Vue+Element

    基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性:    ~ 数据库访问使用spring data jpa+alibaba druid    ~ 前后端数据交互使用 ...

  10. 题解 P4753 【River Jumping】

    这道神奇的模拟题,带一点贪心,其实蛮水的,仔细思考就能ac. 首先我们模拟一下样例2 发现其实答案0 1 2 3也可以,仔细观察题目,我们发现了一句有意思的话:允许输出任意一组答案. 所以就可使用xj ...