响应式网站设计的知识点

问题:

什么是响应式网站?--一个网站能够兼容多个终端

优势:更好的用户体验,较低的开发维护成本:

从用户的角度:

1.响应式网站适配自己手上的设备,免去频繁的上下左右拖拽屏幕,双击放个大的多余的操作

2.无论pc换是智能手机访问,只要一个网站就行了

从产品运营的角度---适配移动设备,一味着占有移动设备,带来了额外的商机

开发的角度:

1.开发一套代码,就有两个网站在线工作

2.只有维护一套代码

3.高逼格

设计师们:

愿意采用一套控件,界面标准去完成pc和移动的,意味的工作了减少了,有更多精力去完成更好的设计

缺点:兼容各种设备工作量大,效率低下

代码累赘,会出现隐藏无用的元素,加载时间长

一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

设计思路:

1.css3中的media  Query(媒体查询)是什么?

 通过不同的媒介类型和条件定义样式表规则!

2.media query能获取哪些值?

设备的宽高--device-width,device-height;

渲染窗口的宽高width,height显示屏幕设备

3.语法:

@media 设备名 only(选取条件) not(选取条件) and(设备选取条件),设备二{sRules}

1.在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'/>

max-width:渲染界面最大宽度

max-device-width:设备最大宽度

2.在样式表中内嵌@media

@media (min-device-width:1024px) and(max-width:989px),

screen and(max-device-width:480px), (max-device-width:480px) and(orentation:lanscape),(min-device-width:480px) and(max-device-width:1024px) and(orentation:portrait ) {srules}

,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

通过Media Queries实现响应式布局设计

好了,我们明白了什么是Media Query,那我们一起来运用到响应式布局的设计项目中去。设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整

当浏览器的可视区小于980px

@media screen and(max-width:980px){

#wrap{ width:90%; margin:0 auto;}

#content{ width:60%; padding:5%;}

#sidebar{ width:30%;}

}

当浏览器的可视区小于650px

@media screen and(max-width:650px){

#header{ height:auto;}

#searchchform{ position:absulueltop:5px; right:0;}

#content{ width:autol float:none; margin:20px 0;}

}

通过上面我们就可以监测浏览器的可视区域变化的时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

* 设置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;

}

最后要注意的是在页面的头部<head></head>之间加上下面这句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

比如一个移动终端屏幕显示最大宽度为480px,那么css代码如下:

[2]

 @media only screen and(max-device-width:480px){…/*此处为支持此移动设备的css样式代码,需将其放置于pc终端css代码之后覆盖之*/}

如果是大型的网站或项目,我们讲为各类型的移动终端独立编写css样式文件,此时的使用方式如下:

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:480px)” href=”small_screen480.css”>

/*small_screen480.css即为对480px大小移动终端书写的css文件*/

css文件被区分引用,接下来的工作就是我们非常熟识的弹性布局了,另外再注意俩点,一是图片,在移动设备上,要做一些特定适合的小图片来匹配,如果单纯使用压缩的图片会失真,影响用户体验;二是在头部加入如下代码,目的是声明在移动设备上设置原始大小显示和是否缩放

[2]

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

最后说下IE浏览器,因为他不支持media Queries的,使用时需要引用一个Media Query Javascript解决,如下:

[2]

<!–[if lt IE 9]>

<script src=”../../css3-mediaqueries.js”></script>

<![endif]–>

以弹性为基础:

引入媒体查询:

响应式网站概念:是一种的方法,他是网站在任何设备,任何尺寸的屏幕上都可以轻松的浏览!完美适配!

fleible grid layout 弹性网格布局

flexble image 弹性图片

media queries 媒体查询

 

如何从零开始编写一个响应式网站

开发网站中有哪些主流,前沿的技术

网站开发必备知识讲解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,674评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,270评论 0 11
  • 今天翻看了以前的老照片,感觉和之前是不一样的,这次让我感到很怀念很怀念,16年,变化真大,它是悄无声息的,当年...
    柠檬白兰阅读 289评论 0 0
  • 笑容_3bc0阅读 414评论 0 0
  • 晨跑1小时 早餐:小碗绿豆粥 小菜一碟 煮鸡蛋一个 肉饼一个 加餐:核桃数个 山楂卷数个 午餐:小碗米饭 鸡翅 猪...
    亚坤坤坤阅读 165评论 0 0