屏幕适配布局

来源：互联网发布：apriori算法置信度编辑：程序博客网时间：2024/05/17 03:48

固定宽度，两边留白

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 排除某种设备

**@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>

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

web app变革之rem
响应式布局这件小事

0 0