手机网站+电脑网站+平版网站 = 响应式网站

在没有足够经费跟精力的做一个手机网站的情况下,响应式网站是个不错的选择。
它有以下的优点:

  • 减少工作量(网站代码只要一份,只需要做js方面的改动及可以了)
  • 节省时间(每个设备都得到考虑,搜索也友好)

首先是[<meta>][1]的设置:
大多数手机的浏览器内核是居于webkit核心,且大多数浏览器都支持使用viewport meta元素覆盖默认的画布缩放。所以我们可以在head中插入一个meta设置具体的宽度或者缩放比例。

<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width = device-width 浏览器页面的宽度等于设备的宽度,user-scalable = no,静止缩放,若为1.0则是:浏览器页面安装视口大小渲染页面,maximum-scale minimum-scale 最大最小缩放页面到设备宽度的几倍。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

针对IE浏览器的一些设置,因为css3是响应式关键技术,但是IE浏览器的支持有限,所以上诉代码的意思是:
告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。具体有关這个的可参考這个博客
设置了viewport meta标签后页面不缩放了,我们可以根据css3的媒体查询针对不同视口的宽度进行修正
csss3媒体查询


@media only screen and (max-width:30em){};
@media only screen and (max-width:50em){};
@media only screen and (min-width:30em) and (max-width:50em){};
@media print{}//打印样式

最大宽度是50em中写的样式,在 30em < width < 50em 中一样的效果,所以不用重复写
百分比布局和rem em
使用百分比布局创建流动的弹性界面:
即是将元素固定尺寸转换为相对尺寸,公式:目标元素的宽度/上下文元素的宽度=百分比宽度,引用自书本《无懈可击的Web设计》。
当被包裹的元素有border时,若不想border随上下文变宽或便窄,可以将被包裹元素减去两边的border,然后再用那个公式。
同理,padding-left,padding-right,以及margin-right,margin-left的大小也是一样的道理。
然后就是页面字体的大小了。
em 相对的也是上下文,rem(root em )相对的是html根元素,

{
font-size:16px;
font-size:1em;//这三个值效果是相等的效果。
font-size:100%;
} html{
font-size: 16px;
}
.parent{
font-size: 2px;
}
.son{
font-size: 2em;//son下的字体大小是4px;
} html{
font-size: 16px;
}
.parent{
font-size: 1rem;//16px;
}
.son{
font-size: 2rem;//32px;
} //我见一些前辈大都這样设置,我知道后也比较喜欢這个,
//因为不会像em那样产生嵌套混乱的问题,也可以很方便的设置24,28這样数值。
html{
font-size: 62.5%;//也就是(10/16)*100%;
}
.parent{
font-size: 2.4rem;//24px;
}
.son{
font-size:1rem;//10px;
}

弹性图片

img{
max-width:100%;//自动缩放到与容器100%匹配
}
.side img{
max-width:50%;//特定的某个样式
}
但是这种会导致图片在视口很大的时候被拉长,所以可以這样
.side img{
width: 30%;
max-width:100px;
}

响应式图片(加载与设备相匹配的图片)

<img class="image" src="a.jpg"
srcset="480px.jpg 128w, 680px.jpg 256w, 890px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
//srcset用来指向提供的图片资源,sizes用来表示尺寸临界点,响应响应式布局
<picture>
<source srcset="1.png" media="(min-width: 400px)">
<source srcset="2.png" media="(min-width: 800px)">
<img src="a.png" alt="pic">
</picture>
//IE均不支持,不过Edg兼容模式支持
​<picture>
<source srcset="a.svg" type="image/svg+xml">
<img src="b.png" alt="pic">
</picture>

还有就是之前的js来监听window.resize事件,以及svg,我对svg 不熟,就不说了。
在响应式图片里面其实还涉及到了物理像素,逻辑像素,dpi等,但我觉得新的方案里面不需要我们写 1x 2x 那些了,我就写了先,因为我对這个也只知道大概~
希望下次可以填满点,如果有错误,欢迎指正~

关于响应式web设计的更多相关文章

  1. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  2. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  3. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  4. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  5. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  6. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  7. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  8. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  9. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  10. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

随机推荐

  1. day09-正侧表达式

    while True: phone_num = input('please input your phone_num:') if len(phone_num) == 11 \ and phone_nu ...

  2. 第二类错误|检验统计量|左偏|右偏|P值

    6 第二类错误在H0中的假设值差别越大时增大? 不对,第二类错误在H0中的假设值差别越大时变小. 检验统计量有哪些? 根据假设内容确定是左偏还是右偏? P值是在原假设为真的条件下,检验统计量大于或等于 ...

  3. Java接口和抽象类区别

    1.抽象类 [public] abstract class ClassName { abstract void fun(); } extends 包含抽象方法的类称为抽象类,但并不意味着抽象类中只能有 ...

  4. input之按键输入

    通过直接操作驱动来监控键盘,只要程序一旦在后台启动,无论在任何页面都可以监控到按键的数值. 步骤如下: 1.找到键盘挂在点:有两种方法 方法一:在   /dev/input路径下通过  cat eve ...

  5. 分布式全局唯一ID与自增序列

    包含时间顺序的ID 此场景最简单的实现方案,就是采用 twitter 的 Snowflake 算法.ID总长64位,第1位不可用,41位表示时间戳,10位表示生成机器的id,后12位表示序列号. 为什 ...

  6. DB2数据库多行一列转换成 一行一列

    在db2中遇到多行一列转为一行一列的需求时,用db2函数 LISTAGG可以实现该功能.语法如下: SELECT   [分组的字段 ] , LISTAGG([需要聚合的字段名], ',')   FRO ...

  7. SpringBoot webjars 映射

    添加静态资源映射 @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.a ...

  8. JavaScript学习总结(三)BOM和DOM详解

    转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西 ...

  9. 修改npm安装的全局路径和配置环境变量

    我之前安装npm时全是默认安装,模块全部安装在C盘了,今天心血来潮,把路径改到了D盘,结果改完后模块都不能识别了,都提示XX模块不是内部命令,这其实是环境变量配置的问题,我都是按照网上的教程改的环境变 ...

  10. js弱类型转换的知识点

    本文属于转载知识点,以下是原博文作者:不死鸟哇的文章,文章链接:原文JavaScript里什么情况下a==!a为true呢? 今天群里有位同学问了这样一个问题,JavaScript在什么情况下会出现变 ...