学习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


css合成学习2

  • 2007年07月13日 16:40
  • 7.36MB
  • 下载

程序员学习资料(2)—硅谷之火,Html Css,python,mysql 等

本次推荐学习资料如下,记得分享给同行哟~ (一),程序员必读之书 《从0到1》.高清版.pdf 硅谷 pay pal 创始人,彼得·蒂尔倾力之作 链接:http://pan.baidu.com/s...

css2中文手册学习

  • 2015年07月08日 21:15
  • 243KB
  • 下载

CSS快速学习2:选择符权重和字体类属性

选择符的权重: CSS中用四位数字表示权重。 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010...

HTML/css理解before:after:学习之-导航条案例2

本次实例介绍了css动画的一部分,有利于初学者理解before:与after:的基本使用。...

Jquery学习笔记(2):CSS3圆角详解:border-radius

摘要: 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:...

CSS学习(2)--font、text、link

1 font-family属性,用于设置一组按优先级排列的字体列表, 如果第一个字体未在访问者计算机上安装,则使用下一个字体; 有两种类型用于设置字体族名称:字体族名称(family-name)和...

搬运自己的html学习笔记2-css的入门

css:层叠样式表,用于渲染html文档的显示 css与html的整合,有内联和外部导入两种方法 新建一个.css文件 #div3{ background-color:#0ff; } ...

CSS2+DIV的学习心得

一、对CSS和页面布局的理解   1. 首先在如何写CSS之前,要先了解页面的整个布局结构,例如:主页面内容、站点导航(主菜单)、子菜单、搜索框、功能区、页脚,清楚了页面的结构,才能更好...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习CSS(2)
举报原因:
原因补充:

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