您好,承接汉中网站建设,网站制作,网站设计,价格优惠! 建站知识 | 建站流程 | 联系方式
汉中网站设计,制作
当前位置:汉中网站建设 > 建站知识 >

响应式网站设计的3个基本原理

更新时间:2019-01-15 作者:zhw888来源:汉中网站建设

响应式网站设计的3个基本原理,你必须掌握,几年前,这是比较容易设计和建立网站。网站比较简单,并在屏幕尺寸变化不大观看在台式机和笔记本电脑。今天接管观众的浏览时间的移动设备,智能手机屏幕,平板手机,平板电脑,你如何正确地确保您的网站上显示整个设备类型和屏幕尺寸?

汉中网站制作该解决方案最初是他探索的方式,使网站设计响应,即让他们根据屏幕大小而改变。一个自适应网站设计是使巧用CSS来保证网页在宽屏幕尺寸范围渲染以及 - 而不诉诸URL重定向或动态提供不同的HTML和CSS代码,这取决于用户代理。它不是一个真正的技术或标准,而是一组设计原则有助于实现的结果。

学习网页设计新课程
网站制作插件动画过渡
在过去的几年里,许多响应模板,CSS框架和WordPress主题如雨后春笋般涌现。这是,例如,有可能创造一个WordPress的响应网站,而无需编写一行代码。

但是,一个真正的网页设计师并不满足于仅仅使用模板。她会作出努力来理解响应网页设计的元素,为了有效地使用它们。
所以今天,我们要看看你需要掌握三个基本技巧,你是一个有效的响应设计师。

1.媒体查询
媒体查询让您可以为不同的媒体类型,如屏幕,平面,电视,手持设备等。根据媒体类型设计不同的布局,可以配置风格,字体和页面的其他元素。
在CSS3介绍,媒体查询让设计师定制内容的呈现,以适应输出设备类型的特定范围。它们由一个媒体类型声明和一个或多个媒体功能计算结果为真或假的表达式。
媒体类型的范围包括手持,屏幕,电视,打印和投影。媒体功能包括,但不限于设备的高度,宽度,纵横比,分辨率,颜色指数以及高度,在浏览器窗口的宽度。
让我们一个基本的例子;想象一下你希望你的文字大小缩小在较小的设备,如手机。该查询看起来是这样的:


现在,你的段落的字体大小将被设置为1EM,除非浏览器宽度小于400像素,在这种情况下,它会收缩到0.8em。
根据我的经验,设计一个响应式网站布局的最好方法是先创建一个默认的主样式表的主要结构元素。然后你就可以在媒体查询添加到自定义基于布局或其他设备元素的元素。如果它比规则屈指可数,这可能是最好把它们搬出来独立的子板 - 你可以选择稍后加载。下面是如何将工作:

此片的代码检查装置是否处于与设备横向模式手持宽度小于720像素,如果是这样,它加载tablet_layout.css样式表。
注意,该特征的宽度,高度,最大/最小宽度,最小/最大高度都是指在浏览器窗口的宽度和高度。该装置的宽度和高度由设备宽度,设备高度,最小/ MAX-设备宽度,最小/ MAX-设备高度控制。如果您想查找更多的例子使用媒体查询MDN具有良好的一轮上涨。

上一篇:你的内容不仅仅是SEO执行 下一篇:没有了

联系人:张先生

电话:18691956227(微信同步)

QQ咨询:201956809