您现在的位置是:网站首页>网站制作心得CSS3|HTML5

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

2019-06-15来源: CSS3|HTML5 人已围观

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

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

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

以往我们显示针对桌面电脑来进行宽度设计,然后将其缩小并针对小屏幕进行内容重排;现在我们应该首先针对小屏幕进行设计,然后逐步增强针对大屏幕的设计和内容。kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

三个简单步骤,让你的网站变成响应式网站kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

ios和Android浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera,都支持用viewport meta元素覆盖默认的画布缩放设置,只需要在html的<head>标签中插入一个<meta>标签。<meta>标签中可以设置具体的宽度或者缩放比例。示例:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

<meta name="viewport" content="width=device-width,initial-scale=2,maximum-scale=3,user-scalable=no">kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

分析:width=device-width告诉浏览器页面的宽度应该等于设备宽度;initial-scale=2页面的缩放比例,设置比例为设备尺寸的2倍;maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍;user-scalable=no禁止用户缩放。缩放是一个重要的辅助功能,所以实践中很少禁用。kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

一:粘贴下面的代码到<head>和</head>标签之间:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

二:针对不同视口宽度修正设计kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

设置viewport meta 标签后,现在我们针对不同视口修正设计效果,创建CSS样式表,并在页面中调用:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

常见媒体查询kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

/* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

@media only screen and (min-width: 481px) {kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

.class{ background: #333;}kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
}kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

/* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

@media only screen and (min-width: 769px) {kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

 .class {kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    background: #666;kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

  }kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

}kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

三:字体、弹性图片、视频kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

html { font-size:100%; }kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

完成后,您可以定义响应式的字体大小,如下所示:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

@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 单元,所以不要忘了实现一个替代。kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

弹性图片kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

我们需要为图片设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

img {kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    max-width: 100%;kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    height: auto;kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    width: auto\9; /* ie8 */kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

}kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

弹性内嵌视频kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

.video embed,kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

.video object,kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

.video iframe {kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    width: 100%;kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

    height: auto;kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

}kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

参考网站:kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

1、黑色Html5个人博客模板主题《如影随形》kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

黑色Html5个人博客模板主题《如影随形》kN4淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

很赞哦! ()

猜您喜欢

付费说明

    1、安装cms后台,费用是300,基础费用300包括后台调试以及页面模板修改.

    2、请加我个人微信 634626966,或者扫一扫微信二维码。备注“网站”

    3、系统安装只限定于帝国cms,并且支持php,虚拟主机,请选择linux系统

    4、静态页面,是指html页面,不能直接使用在dede,帝国CMS,wordpress,phpcms等常用的建站系统。

    5、【收费说明】制作企业网站,我是这么收费的!

文章评论

站点信息