猪八戒设计网站如何做兼职,建设商务网站需要哪些步骤,什么软件可以在手机上做装修设计,游戏源码论坛下面我们就通过这篇教程#xff0c;帮助大家从三个步骤来了解和学习“Responsive”设计
第一步#xff1a;Meta标签
大家都知道#xff0c;现在智能手机上浏览web页面会让页面适应屏幕的大小#xff0c;显示在屏幕上。不过我们可以通过“meta”标签对他进行重置#xff…下面我们就通过这篇教程帮助大家从三个步骤来了解和学习“Responsive”设计
第一步Meta标签
大家都知道现在智能手机上浏览web页面会让页面适应屏幕的大小显示在屏幕上。不过我们可以通过“meta”标签对他进行重置告诉他使用设备的宽度为视图的宽度也就是说禁止其默认的自适应页面的效果具体设置如下 另外一点由于“Responsive”设计是结合CSS3的Media Queries属性才能尽显这种风格的设计但大家都懂在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本 第二步HTML Markup 在这个实例中有一个最常见最基础的HTML Markup。他主要包括了一个“头部”、“主内容”、“边栏”和“页脚”四个主要部分。而且其中“头部”固定了一个高度值“180px”“主内容”宽度设置为“600px”“边栏”的宽度为“300px”。这些只是一些最基本的样式值。你可以根据你的需求进行更详细的设置。这里不在做另外说明
第三步Media Queries
CSS3的Media Queries是“Responsive”设计中的重要一部分主要用他来告诉浏览器在一定条件之下如何进行渲染web页面。在这里我们只展示的是让CSS3 Media Queries告诉浏览器在一定的条件下如何渲染上面所说四部分的宽度值而以
3.1 下面这种规则是当浏览器可视大小等于或小于“980px”的布局。从代码中可以清楚的看到在浏览器可视大小符何下面条件时整个布局从固定布局转为流体布局具体请看代码的变化 3.2 接下来我们在来看第二种情况浏览器可视化大小等于或小于700px时把“content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”也就成了一列的满屏显示具体代码如下 3.3 最后我们在一起来看一下手机上的渲染当显示器可视大小等于或小于480px时将“#header”的高度重置为“auto”并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了 上面只是写了三种情效果的效果大家可以根据自己的爱好设定更多的条件。而且也可以还可以将页面的更细致的样式渲放在指定的条年中达到不同的效果渲染。换句话说通过CSS3的Media Queries在不同一条件中使用不同的样式规则渲染出不同的页面效果。这里只是做了一基本的使用介绍
