关闭

学习CSS(2)

标签: htmlcss响应式布局
268人阅读 评论(0) 收藏 举报
分类:

1.总体介绍

    CSS3响应式布局,为了解决如今各式各样的浏览器分辨率以及不同移动设备的显示结果,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本,即一个页面可以在多个终端呈现出你想要的效果,能够兼容多个终端。

    优点:兼容性更好,兼容多个设备。

    缺点:兼容量设备工作量大,效率低,代码累赘,出现很多无用的元素,加载时间长,可能造成布局不同,辨识度出现差异。

    <link rel=”stylesheet” href=”*.css” media=”screen and (min-width:1000px)”>

    media指媒体类型,一般的响应式布局都是通过它来完成的,其中的screen是指电脑屏幕,min-width指小于这个数值的时候,就不显示前面的css样式。

    同样也可以在<style></style>中设置样式和媒体类型的属性。

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS3响应式布局</title>
<!--
<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">
-->
<style>
  @media  screen and (min-width: 600px) {
     .one{
    border:1px solid red;
height:100px;
width:100px;
 }
  }
</style>
</head>
 
<body>
<div class="one">
</div>
</body>
</html>


2.媒体类型

    

描述

all

默认,所有

aural

语音合成器

braille

盲文反馈装置

handheld

手持设备

projection

投影仪

print

打印预览模式

screen

计算机屏幕

tv

电视类型设备

 

3.限定操作符

描述

and

逻辑与

not

逻辑非

only

限定某种设备

 

4.属性值

属性类型

描述

width

页面可见区域宽度

height

页面可见区域高度

device-width

屏幕可见宽度

device-height

屏幕可见高度

orientation

定义’height’是否大于或等

于’width’。值portrait代表是,

landscape代表否,即设备手持方

向:portait为横向,landscape为

竖向

acpect-ratio

定义’width’与’height’的比率,即浏览器的长宽比

device-aspect-ratio

定义’device-width’与’device-height’的比率,

即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28326次
    • 积分:951
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:2篇
    • 译文:4篇
    • 评论:2条
    文章分类
    最新评论