响应式网站制作成为当下网站制作的重点和核心,响应式网站的出现和诞生就是为了解决不同应建设设备上的浏览和使用问题的,由于传统的网站在制作的时候,是按照固定的宽高来实现的,而响应式网站制作的时候就不是采用的固定的宽度了,而是采用的相对宽度来实现的,目的就是为了解决在不同的硬件设备端达到相应的门对和要求,如果采用绝对的宽度的话,在手机端浏览得时候就很有可能出问题了,所以相对宽度以及响应式网站就能很少的解决多段的困局,接下来我们来听听西安网页制作公司的专家是怎么说的。
一、"自适应网页设计"的概念
2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。
自适应网页设计如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。如果屏幕宽度在400像素以下,则6张图片分成三行。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流流览器都支持这个设置,包括IE9。对于那些老式流览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度: width: xx%; 或者 width:auto;
四、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。 如:body {font: normal 100% Helvetica, Arial, sans-serif; }
上面的代码指定,字体大小是页面默认大小的100%,即16像素。 h1 {font-size: 1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。 small { font-size: 0.875em; }
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
五、流动布局(fluid grid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。 如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水准方向overflow(溢出),避免了水准滚动条的出现。 另外,绝对定位(position: absolute)的使用,也要非常小心。
六、选择加载CSS
"自适应网页设计"的核心,就是CSS3引入的Media Query模组。 它的意思就是,自动探测屏幕宽度,然后加载相应的CSS档。上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css档。
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css档。 除了用html标签加载CSS档,还可以在现有CSS档中加载。 @import url("tinyScreen.css") screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS档中,也可以根据不同的屏幕解析度,选择应用不同的CSS规则。 如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
八、图片的自适应(fluid image)
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同解析度的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
小程序与原生APP那个好?下面我们就来一起了解一下小程序与原生APP那个好。以下是所整理的小程序与原生App的内容,希望对你有所帮助。
小程序的优点:
基于微信平台开发,享受微信自带的流量,这个优点最大
小程序和Vue写法的区别?下面我们就来一起了解一下小程序和Vue写法的区别。以下是我所整理的小程序和Vue写法的区别,希望对你有所帮助。
遍历的时候:
调用data模型(赋值)的时候:
小程序:this.data.item // 调用,
小程序:this.setDate({item:1})//赋值
Vue:this.item //调用,
Vue:this.item=1 //赋值
小程序调用后台接口遇到那些问题?下面我们就来一起了解一下小程序调用后台接口遇到那些问题。以下是所整理的小程序调用后台接口遇到的问题,希望对你有所帮助。
数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序
小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件分析微信小程序的优劣势?下面我们就来一起简单的了解一下微信小程序的优劣势。下面是所整理的微信小程序的优劣势,希望对你有所帮助。
优势:
容易上手,基础组件库比较全,基本不需要考虑兼容问题简单描述下微信小程序的 相关文件类型。下面我们就来一起了解一下微信小程序的 相关文件类型。以下是所整理的微信小程序的 相关文件类型,希望对你有所帮助。
wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构
wxss 样式文件,是一套样式语言,用于描述WXML的组件样式请谈谈原生开发小程序,wepy,mpvue的对比?下面我们就来一起了解一下原生开发小程序,wepy,mpvue的对比。个人认为,如果是新项目,且没有旧的 h5 项目迁移,则考虑用小程序原生开发,好处是相比于第三方框架,坑少。
而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发,近期看wepy几乎不更新了,所以推荐美团的mpvue。