学习CSS(2)

原创 2015年07月09日 23:34:30

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


版权声明:

相关文章推荐

css2中文手册学习

  • 2015-07-08 21:15
  • 243KB
  • 下载

CSS2中文手册学习

  • 2011-08-11 14:48
  • 259KB
  • 下载

css学习记录2-盒子模型-浮动

HTML,CSS,JPG文件一:html2.html代码 <link rel="stylesheet" href="cs

CSS2中文手册指导学习

  • 2008-10-12 11:00
  • 246KB
  • 下载

CSS学习<2>

一、CSS派生选择器 作用:通过根据元素在上下文之间的关系来定义样式,可以是标记更加简洁。 派生选择器的英文名称是contextual selectors(直译是上下文选择器)。 在CSS1中依...

CSS2 中文学习手册.chm

  • 2008-03-26 22:41
  • 261KB
  • 下载

CSS2中文学习必备手册

  • 2008-10-02 19:56
  • 259KB
  • 下载

CSS学习2(值和单位)

数字 CSS中有两类数字,整数和实数。 百分数 百分数值几乎总是相对于另一个值,这个值可以是任意的:可能是同一元素另一个属性的值,也可以是从父元素继承的一个值,或者是祖先元素的一个值。接受百...

css2 学习样式的好帮手

  • 2009-04-23 11:22
  • 245KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)