专栏首页杨逸轩 ' sBlog响应式Web设计技巧以及入门技巧

响应式Web设计技巧以及入门技巧

html5和css3流行至今,我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习,浅显的理解就是根据屏幕分辨率的大小,网站布局、图片、文字大小等相应改变。以后使用平板、手机浏览网站的用户会越来越多,对于前端设计师,学好用html5、css3做响应式网站是势在必行。

响应式网页设计这个术语,由伊桑马克特提出,他在Alist Apart 发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页布局。还有一些其他叫法,如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

以往我们显示针对桌面电脑来进行宽度设计,然后将其缩小并针对小屏幕进行内容重排;现在我们应该首先针对小屏幕进行设计,然后逐步增强针对大屏幕的设计和内容。

三个简单步骤,让你的网站变成响应式网站

ios和Android浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera,都支持用viewport meta元素覆盖默认的画布缩放设置,只需要在html的标签中插入一个标签。标签中可以设置具体的宽度或者缩放比例。

示例:

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

分析:

width=device-width告诉浏览器页面的宽度应该等于设备宽度;initial-scale=2页面的缩放比例,设置比例为设备尺寸的2倍;maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍;user-scalable=no禁止用户缩放。缩放是一个重要的辅助功能,所以实践中很少禁用。

  1. 粘贴下面的代码到和标签之间:
<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面

  1. 针对不同视口宽度修正设计

设置viewport meta 标签后,现在我们针对不同视口修正设计效果,创建CSS样式表,并在页面中调用:

常见媒体查询

/* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */

@media only screen and (min-width: 481px) {

.class{

    background: #333;

}

}

/* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */

@media only screen and (min-width: 769px) {

 .class {

    background: #666;

}

}

  1. 字体、弹性图片、视频

对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。

rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:

html { font-size:100%; }

完成后,您可以定义响应式的字体大小,如下所示:

@media (min-width: 640px) { body {font-size:1rem;} } 

@media (min-width:960px) { body {font-size:1.2rem;} } 

@media (min-width:1100px) { body {font-size:1.5rem;} }

请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。

弹性图片

我们需要为图片设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:

img {

    max-width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

}

弹性内嵌视频

同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:

.video embed,

.video object,

.video iframe {

    width: 100%;

    height: auto;

}

PS:觉得不错记得转发哟!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【小技巧】CSS之响应式Web设计(横屏/竖屏提醒)

    结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

    用户5997198
  • 【Web技术】522- 设计体系的响应式设计

    在蚂蚁内部有着数量繁多且复杂的中后台业务系统,Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题,随着蚂蚁产品生态的多端化进...

    pingan8787
  • 初学Java编程需要知道的几大重点步骤

    初学Java编程需要知道的几大重点步骤 ? 一、学习前的准备工作 java语言一般用于大型的服务器程序开发,所有有必要了解如下内容:Unix开发环境Unix系统...

    企鹅号小编
  • 月入35k大佬总结:web前端必须学习的内容(附全套前端教程)

    优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析,企业要求主要有两部分,一个...

    用户5827212
  • 关于项目里面的硬核漏洞(找不到漏洞看这里)

    以下漏洞过于硬核又比较相对容易挖掘,毕竟我是实习两年半的低危文档工程师。(可能写的不太全)适合在渗透里面没有找到漏洞,以防尴尬。

    Khan安全团队
  • Photoshop零基础教程集锦,助你快速进阶为大佬,轻松、任性!!!

    现今,对于Web或App UI设计师而言,除了不断学习专业知识,提升设计技能。掌握一款得心应手的设计工具(例如设计师们常用的图像处理工具PhotoShop,矢量...

    奔跑的小鹿
  • 零基础到精通Linux,从这篇文章开始

    正好在最近,看到了一篇不错的资料,其中对于Linux入门学习的描述极其详尽,因此特别摘抄其中段落,制作成思维导图分享给大家。

    马哥linux运维
  • 前端学习——这十本书一定要看

    用户1687375
  • 零基础到精通Linux,从这篇文章开始

    正好在最近,看到了一篇不错的资料,其中对于Linux入门学习的描述极其详尽,因此特别摘抄其中段落,制作成思维导图分享给大家。

    马哥教育
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • 「技术架构」10个提升应用程序性能的倚天剑和屠龙刀

    提高web应用程序性能比以往任何时候都更加重要。在线经济活动的份额正在增长;超过5%的发达国家的经济现在是在互联网上的(参见参考资料中的互联网统计数据)。而我们...

    首席架构师智库
  • 优秀的前端需要做到什么?

    mcq
  • 互联网时代,如何成为优秀的web前端开发者?

    互联网技术发展日新月异,成为成为一名优秀的web前端开发者,需要不断学习,关注行业前沿。 本经验贴分享如何成为优秀web前端开发者的经验,供读者参考。 步骤1 ...

    企鹅号小编
  • 2018上半年这10本新书,技术大牛们都在追着看

    不知你的上半年都有哪些收获?上半年只收获了8斤体重的数据叔惶恐地抄下了郑州地铁上看到的名言警句:

    华章科技
  • 前端资源分享-只为更好前端

    阅读更多 本文在GitHub的地址GitHub Front-end-resources

    WEBING
  • 前端资源、交流社区、技术博客等整理总汇

    最近看到这篇前端资源总汇的文章,整理的非常详细,于是搬过来,方便自己后期查阅,侵删。

    德顺
  • CTF是个啥?扫盲笔记带你一探究竟!

    CTF全称“Capture the FLAG”,俗称夺旗(flag)比赛,起源于1996年举办的DEFCON全球黑客大会,随着安全攻防技术的发展,...

    轩辕小子
  • CRLF注入(响应截断)挖掘技巧及实战案例全汇总

    CRLF是CR和LF两个字符的拼接,它们分别代表”回车+换行”(\r\n)“,全称为Carriage Return/Line Feed”,十六进制编码分别为0...

    Jayway
  • JavaWeb类

    本书全面介绍了Tomcat的架构、各组件的实现方案以及使用方式。包括Tomcat的基础组件架构以及工作原理,Tomcat各组件的实现方案、使用方式以及详细配置说...

    用户5224393

扫码关注云+社区

领取腾讯云代金券