【23】响应式布局教程
来源:互联网 发布:linux网络流量监控 编辑:程序博客网 时间:2024/06/15 12:12
二: 媒体查询:
根据特定的环境查询各种属性值,比如设备的宽度,是否横向使用不同的css样式来渲染。
媒体查询使用如下:比如内联样式可以如下写:
1. 最大宽度960px一种布局:
@media screen and (max-width:960px) {<=960}
2. 最小宽度600px 另一种布局:
@media screen and (min-width:600px) {>=600}
3. 宽度在600px 到 960px之间,如下:
@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}
4.外联样式使用link标签来引用样式:
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/><link rel=”stylesheet” href=”xx2.css” media=”screen and (min-width:600px)”/><link rel=”stylesheet” href=”xx3.css” media=”screen and (min-width:600px) and (max-width):960px”/>
如果对于像ipad来说,我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。理解meta各个属性的含义:做h5页面移动端开发需要在head标签内引入下面这句话。(如果没有引入的话,页面的字体等大小就不正常了)。<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
具体含义如下:Width: 控制viewport的大小。如device-width为设备的宽度。initial-scale: 初始缩放比例,页面第一次加载时的缩放比例。maximum-scale 允许用户缩放到的最大比例,范围从0到10.0minimum-scale: 允许用户缩放到的最小比例,范围从0到10.0user-scalable: 用户是否可以手动缩放,值可以是:**1, yes,true允许用户缩放;****2, no、false不允许用户缩放。 (只设置这一个属性,有的浏览器并不生效,我们需要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1)。**综合:流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。但是针对响应性web布局使用媒体查询也有缺点的,缺点如下:对于设计师:要针对不同的屏幕大小设计不同的设计,(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。对于前端对于不同的屏幕要写不同的样式,增加了工作量,同时维护起来不是很方便(要维护几份不同的css)。**三:图片**—-**1. 对于背景图片来说,css3有个属性 background-size可以等比例缩放背景图片。**但是对于小屏幕的移动设备去加载大背景图片的话,有缺点的,最主要的缺点是要更大的带宽,浪费流量。所以我们要想做的更好的话,可以使用媒体查询根据设备的宽度来渲染不同大小的背景图片。**2. 对于页面上的![](”XX.png”)
五:元素未知宽度居中。
我们先来介绍一下未知宽度,元素居中的方法,对于响应性web设计是有帮助的,我们可以来了解下。
第一种方法:
假如页面html结构如下:
<div> <p>What is CSS?</p></div>
只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码:
div{text-align:center}p{display:inline-block}
第二种方法如下:
div{position:relative; left:50%; float:left;}p{position:relative; left:-50%;}
**六:媒体查询标准写法:**media queries
@media 设备类型 and (设备特性-宽度) {
// css 样式
}
在css2.1中定义了10种设备类型,分别如下:
可以指定的值 含义
all 所有设备
screen 显示器
print 打印用纸或打印预览视图
handled 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲人打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介,比如电传打字机和终端
Css设备特性共有13种,是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定值接受min/max的前缀,用来表示大于等于或小于等于的逻辑,以此避免使用<和>这些字符。
设备特性如下表:
特性 可指定的值 是否允许使用min/max前缀 特性说明
width 带单位的长度数值 允许 浏览器窗口的宽度 css
height 带单位的长度数值 允许 浏览器窗口的高度
device-width 带单位的长度数值 允许 设备屏幕分辨率的宽度值
device-height 带单位的长度数值 允许 设备屏幕分辨率的高度值
orientation 只能指定两个值:portrait或landscape 不允许 窗口的方向是纵向还是横向
aspect-ratio 比例值,例如:16/9 允许 窗口的纵横比,比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio 比例值,例如:16/9 允许 设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值
color 整数值 允许 设备使用多少位的颜色值,如果不是彩色设备,该值为0
color-index 整数值 允许 色彩表中的色彩数
monochrome 整数值 允许 单色帧缓冲器中每像素的字节数
resolution 分辨率值,譬如300dpi 允许 设备的分辨率
scan 只能指定两个值:progressive或interlace 不允许 电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描
grid 只能指定两个值:0或1 不允许 设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0
上面是一些响应式web设计的基本知识点,下面我们可以详细讲解下响应式web设计如何实践?
1. 首先需要在页面头部引入这行meta代码,如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />
还要引入这一句:
<meta content="telephone=no,email=no" name="format-detection" />
我们的代码有类似于电话这样的数字的时候,因为有的手机上它会自动转换成可以拨打电话,所以我们加上这句就不会了。
2. 响应性web设计需要使用css3媒体查询media来写不同的css样式。
在移动端浏览器中或者某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方定义为,设备的物理像素与设备的独立像素的比例,也就是 devicePixelRatio = 设备的物理像素/ 设备的独立像素。这三个参数不是固定的,只要其中2个确定了,那么就可以知道第三个参数了,设备的物理像素我们可以映射到设备的分辨率的宽度,独立像素我们可以映射到媒体查询media定义的宽度。而比列devicePixelRatio我们可以理解为css中的1像素(px)在设备上占用多少个物理像素。比如我们目前常见的手机分辨率如下:
手机类型: 分辨率
小米3 1080*1920
小米2 720*1280
红米Note 720*1280
魅族4 1152*1920
魅族3 1080*1800
魅族2 800*1280
iphone6 750*1334
iphone5s 640*1136
iphone4s 480*800
iphone3s 320*480
三星 720*1280
三星 480*800
如上小米3分辨率为1080,独立像素为360px,那么比列为3,也就是一个css的1px,占用3个物理像素,小米2和红米Note分辨率为720,独立像素还是360px,所以比列为2,所以小米3相对于小米2与红米Note更清晰。同理iphone和其他类型的手机也一样。
而上面说的独立像素就是360px,正是我们css中的媒体查询关联的。
如下我们可以在css加上这样的媒体查询就可以匹配到样式了;如下:
/* 针对手机屏幕的宽度是360 384等屏幕的宽度
*width(宽度可以设置为384px) max-width:384来计算 但是边距 字体大小等还是安装360px来计算
*******************************/
@media (min-width:360px) and (max-width: 399px) {}
而我们目前的独立像素有320,400的,我们也可以增加css媒体查询。如下:
/* min-width:320px
针对设备独立像素为320px 的css
min-width:320 和 max-width:639之间 320-639公用样式也包含在里面
============================*/
@media (min-width: 320px) and (max-width:639px){}
/*
- 针对设备独立像素为400px
========================*/
@media (min-width: 400px) and (max-width:401px){}
但是也还有些目前还未知的独立像素,比如未来的某时刻有大于640px的独立像素,或者是说我们手机移到竖屏时候,我们也可以针对适应的做一点匹配。如下我们针对640px-999px做一个匹配。
/* min-width:640px
- 针对设备独立像素为640px 的css
* min-width:640 和 max-width:999之间
============================*/
@media (min-width: 640px) and (max-width:999px){}
但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。
/* 最小宽度1000样式
*为了适应PC端 所以PC端在设计时候 默认以1000px来设计的
=======================*/
@media screen and (min-width:1000px) {}
我们都知道在IE6-8下 IE是不支持css3中的媒体查询的,所以在网上有大牛已经帮我们考虑到这个问题了,所以只需要在网上下载 respond.js下来放到我们本地,然后页面上引入即可。respond.js的github地址如下:
https://github.com/scottjehl/Respond/
通过以上:我们可以对编写css响应性web设计有一个规范,如下:(当然如果大家有更好的方法也可以提出来。)
头部reset.css 是否要独立出来一个css文件,或者不独立出来 直接放在css顶部。
公用的头部或者尾部样式 直接放在css文件顶部,及公用的页面css样式放在顶部(添加注释。)
媒体查询css样式分别如下组织:
移动端开发css媒体查询 代码组织如下:
/* min-width:320px
* 针对独立像素为320px 的css
=======================================================================================================*/
@media (min-width: 320px) and (max-width:639px){/* css style*/}/* 针对独立像素的宽度是360 384等* max-width:384来计算 但是边距 字体大小等还是安装360px来计算*****************************************/@media (min-width:360px) and (max-width: 399px) {/* css style*/}
/* 针对独立像素为400px
=======================================================================================================*/
@media (min-width: 400px){/* css style*/}
/* 针对独立像素大于640以上的 小于999的
=======================================================================================================*/
@media (min-width: 640px) and (max-width:999){/* css style*/}
- 在PC端 1000以上的媒体查询写在如下里面:
@media screen and (min-width:1000px) {/* css style*/}
- 基本的编码规范注意事项如下:
1.给html根元素字体大小定义相对单位(rem)如下:
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
之后的元素字体使用rem作为单位。比如h2字体大小是24px,那么在移动端 字体大小设置为 font-size:2.4rem 在媒体查询@media (min-width:1000) {}内 字体大小希望可以写2个,font-size:24px;font-size:2.4rem,这是为了未来的移动设备独立像素超过1000后能使用rem作单位。
2.根据设计稿给body元素设置默认的font-size及color,之后的媒体查询根据自身的条件需要覆盖font-size及color的话 就覆盖掉。
3.在对应的设备媒体查询内,有很多公用的css样式希望合并,比如这样的:
.six-qa li .q{line-height:26px;font-size:1.6rem;}.six-qa li .a{line-height:26px;font-size:1.6rem;}
可以直接合并成如下:
.six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}
编写响应性web设计css媒体查询更好的方案思考?
我们都知道,为了自适应各种设备,我们需要编写不同的css进行适配,比如宽度,外边距,内边距,字体大小等不同,需要不同的适配,那么我们现在能不能编写一份css呢,比如我编写一份针对:独立像素为400屏幕宽度的 编写一份css样式,然后其他的样式,比如320的,384的,360的或者640以上的,针对这些css样式,我们能不能使用NodeJS来自动读取400的css,然后分别对上面独立像素大小的屏幕进行比例一下,比如屏幕400像素的 font-size:24px 那么 320px的屏幕字体大小就是 font-size = Math.floor(320*24/400),其他css属性都按照这种方式来做,那么在本地就可以生成不同的版本css了(比如针对320版本的,针对640以上css版本的),然后在head头部分别引入不同的css版本,比如如下引入:
<link rel="stylesheet" href="320.css" media="all and (min-width:320px) and (max-width:321px)"/><link rel="stylesheet" href="360.css" media="all and (min-width:360px) and (max-width:399px)"/><link rel="stylesheet" href="400.css" media="all and (min-width:400px) and (max-width:401px)"/><link rel="stylesheet" href="640.css" media="all and (min-width:640px) and (max-width:999px)"/><link rel="stylesheet" href="1000.css" media="all and (min-width:1000px)"/>
我们知道,只要设备的宽度在以上任何一种的时候 只会渲染一份css,其他的css不渲染,所以我们可以按照这种方式来做一份css。至于这种方案我以后会使用nodeJS来做出来的。
- 【23】响应式布局教程
- html响应式布局教程
- Connect教程系列--响应式布局(一)
- [响应式布局]响应式布局技巧
- 响应式布局设计指南和教程(1)--响应式时代的设计历程
- 响应式布局入门
- 响应式布局原理
- 响应式布局入门
- 响应式布局入门
- 响应式布局入门
- 浅谈响应式布局
- 响应式布局
- 响应式布局
- 浅谈响应式布局
- 实现响应式布局
- 浅谈响应式布局
- 响应式布局
- 响应式布局是什么?
- python中__init__()函数的用法
- 表单事件
- 组件化开发之利用SVN搭建私有SpecRepo
- SQL中的每一张表都必须设有主键吗
- java初体验
- 【23】响应式布局教程
- oracle数据库高水位回收原理及操作方法
- java EE开发之Servlet第十四课:自定义注解Annotation
- 全排列的递归算法
- redis4.0.0 集群安装详细步骤
- U盘安装redhat 7.4的最终解决方案
- es6 中类与对象的一些心得
- 5分钟搞定android混淆
- 不用第三方写一个简单的推流软件