屏幕适配布局

最新推荐文章于 2023-08-21 09:41:03 发布

AidanDai

最新推荐文章于 2023-08-21 09:41:03 发布

阅读量561

点赞数

分类专栏： html and css 文章标签： css 布局屏幕适配

本文链接：https://blog.csdn.net/AidanDai/article/details/48415759

版权

html and css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

固定宽度，两边留白

viewport缩放

上面两种方法弊端较多，实现起来也比较简单；赞不记录

rem等比例适配

html {
    font-size : 20px;
}
@media only screen and (min-width: 320px){
    html {
        font-size: 10px !important;
    }
}
@media only screen and (min-width: 384px){
    html {
        font-size: 12px !important;
    }
}
@media only screen and (min-width: 480px){
    html {
        font-size: 15px !important; 
    }
}
@media only screen and (min-width: 640px){
    html {
        font-size: 20px !important; 
    }
}

rem是基于根元素的相对单位
上述示例结果如下：

CSS @media

简介

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
设备类型(media type):

all所有设备；
screen 电脑显示器；
print打印用纸或打印预览视图；
handheld便携设备；
tv电视机类型的设备；
speech语意和音频盒成器；
braille盲人用点字法触觉回馈设备；
embossed盲文打印机；
projection各种投影设备；
tty使用固定密度字母栅格的媒介，比如电传打字机和终端。
设备特性(media feature):

媒体特性	值	可用媒体类型	接受min/max	简介
width		视觉屏幕/触摸设备	yes
heigth		视觉屏幕/触摸设备	yes
device-width		视觉屏幕/触摸设备	yes
device-heigth		视觉屏幕/触摸设备	yes
orientation	portrait	landscape	位图介质类型	no
aspect-ratio		位图介质类型	yes
device-aspect-ratio		位图介质类型	yes	定义’device-
color		视觉媒体	yes
color-index		视觉媒体	yes
monochrome		视觉媒体	yes	定义在一个单色框架缓冲区中每像
resolution		位图介质类型	yes
scan	progressive	interlace	电视类	no
grid		栅格设备	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

4. 语法：以下表达式摘自@杜瑶大神的css3手册

@media：<media_query_list>
<media_query_list>：[<media_query>[',' <media_query>]*]?
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>：'('<media_feature>[:<value>]?')'

不理解的查查正则表达式手册，可以像理解sql去理解这个表达式

示例一：在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>

上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

*对于原文有：rel=”external nofollow”；本人觉得可以去掉* *rel=”external”打开新窗口；rel=”nofollow”告诉搜索引擎，该链接与本站无关，请不要传递本站任何权重。*

示例二：在样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape),
(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

**注意and的使用** 5、逻辑关键字：

关键字说明
only 限定某种设备类型
and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not 排除某种设备

关键字	说明
only	限定某种设备类型
and	逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not	排除某种设备

**@media 示例**

<!DOCTYPE html>
<head>
    <meta charste="utf8"> 
    <meta name="viewport" content="width=device-width; user-scalbale=no; initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="link.css"/>
    <!--[if lt IE 9]>
         <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
    </script> 
    <![endif]-->
    <style type="text\css">
        /* 禁用iPhone中Safari的字号自动调整 */
        html {
            -webkit-text-size-adjust: none;
        }
        /* 设置HTML5元素为块 */
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block;
        }
        /* 设置图片视频等自适应调整 */
        img {
            max-width: 100%;
            height: auto;
            width: auto\9; /* ie8 */
        }
        .video embed, .video object, .video iframe {
            width: 100%;
            height: auto;
        }
    </style>
</head>

本博文只是自己的学习笔记,写的过程中参考以下博文（都很好，感谢原博主）

AidanDai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
屏幕适配布局

固定宽度，两边留白viewport缩放上面两种方法弊端较多，实现起来也比较简单；赞不记录rem等比例适配html { font-size : 20px;}@media only screen and (min-width: 320px){ html { font-size: 10px !important; }}@media only screen a
复制链接

扫一扫

专栏目录