咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 552|回复: 0

[CSS] CSS 屏幕大小自适应的实现示例

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-10-4 22:35:45 | 显示全部楼层 |阅读模式
    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器:
    media的使用和规则:
      ①被链接文档将显示在什么设备上。
      ②用于为不同的媒介类型规定不同的样式。
    语法:
    @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}
    实例:
    1. /* 这是匹配横屏的状态,横屏时的css代码 */
    2. @media all and (orientation :landscape){}
    3. /* 这是匹配竖屏的状态,竖屏时的css代码 */
    4. @media all and (orientation :portrait){}
    5. @media X and (min-width:200px){}
    6. /*X为媒体类型--->比如print/screen/TV等等*/
    7. /* 宽度大于600px小于960之间时,隐藏footer结构 */
    8. @media all and (min-height:640px) and (max-height:960px){
    9.       footer{display:none;}
    10. }
    复制代码
    在实际应用的时候,首先得在HTML的头文件<head>里上加入以下代码:
    1. <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的类型很多,这里就发菜鸟教程的对应链接了:https://www.jb51.net/css/103906.html
    下面是media类型的screen(用于电脑屏幕,平板电脑,智能手机等):
    css自适应屏幕大小大方法:
    1. @media screen and (min-width: 320px) and (max-width: 1156px){
    2.               .site-bg-dl {
    3.               position: fixed;
    4.               height: 100%;
    5.               width: 100%;
    6.               z-index: 0;
    7.               background-image: url(bjxzfwzx/images/bj1.png);
    8.               background-size: cover;
    9.               background-repeat: no-repeat;
    10.               background-attachment: fixed;
    11.               background-size:100% 100%;
    12.               -moz-background-size:100% 100%;
    13.             }
    14. }
    复制代码
    解释:
    告诉浏览器当屏幕大于320px,并小于1156px下执行此代码;
    在css中添加如下内容 可以分别定制不同屏幕的显示样式:
    1. /* 大屏幕 :大于等于1200px*/
    2. @media (min-width: 1200px) { ... }
    3. /*默认*/
    4. @media (min-width: 980px){...}
    5. /* 平板电脑和小屏电脑之间的分辨率 */
    6. @media (min-width: 768px) and (max-width: 979px) { ... }
    7. /* 横向放置的手机和竖向放置的平板之间的分辨率 */
    8. @media (max-width: 767px) { ... }
    9. /* 横向放置的手机及分辨率更小的设备 */
    10. @media (max-width: 480px) { ... }
    复制代码
    到此这篇关于CSS 屏幕大小自适应的实现示例的文章就介绍到这了,更多相关CSS 屏幕自适应内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛! 

    原文地址:https://www.jb51.net/css/743241.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 04:30

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表