当前位置: 首页 > 新闻资讯 > 手机网站 > 怎样制作手机电脑自适应的网站?

怎样制作手机电脑自适应的网站?

发表日期:2019-02-28 08:48:10文章编辑:网搜科技

现在流行的是三网合一、四网合一的网站,也就是PC端、移动端合二为一的网站,而移动端又分为了微网站和普通手机站两种,那么怎样操作可以让网站实现手机、电脑自适应的效果呢?在这里小编给大家这里了一些思路和方法,具体讲解如下:


第一点,允许网页宽度自动调整:“自适应网页设计”到底是怎么做到的呢?其实并不难。首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例为1.0,即网页的初始大小占屏幕面积的100%。


第二点,不使用绝对宽度:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。


这一条非常重要。具体说,CSS代码不能指定像素宽度,只能指定百分比宽度。这里开发是指一个网页不仅能用在PS上,也能同时用于移动端,但是对于webapp这种还是需要单独做一个webapp使用的页面。


第三点,相对大小的字体:字体也不能使用绝对大小(px),而只能使用相对大小(em)。


第四点,流动布局(fluid grid):“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。


float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: )的使用,也要非常小心。


第五点,“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的文件。


第六点,CSS的@media规则:同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。


第七点,图片的自适应(fluid image):除了布局和文本,“自适应网页设计”还必须实现图片的自动缩放。这只是一行CSS代码,具体如下:


img{ max-width:100%;}这行代码对于大多数嵌入网页的视频也有效。


以上文章中,小编只是讲解了大体的思路以及怎样操作的步骤,并没有编写出具体的代码,大家可以从一些教学网站上来学习具体代码的编写,其实操作起来也是非常容易的。


以上文章信息来源于网络,由专业济南网站制作公司——网搜科技整理发布。


相关新闻

浅谈响应式网站的一些“坑”

营销型网站、响应式网站可能是近几年我们听到过的非常普遍的两种网站形式,很多客户觉着响应式网站可以自适应任何尺寸的设备,是网站的一种较好的选择,然而响应式网站也存在着不少的“坑”,小编给大家简单普及一下。

日期:2019-02-28 08:48:10

制作自适应网站应该注意什么事项

响应式网站相对来说投入的成本比较大,时间也比较长一些,所以很多人对比之下选择了自适应网站,其实小编认为自适应网站并不比响应式网站差了多少,而且小编也坚信在很快自适应网站就会被大众所认可、青睐,那么以后自适应网站制作时需要注意些什么问题呢?小编总结了以下五点。

日期:2019-02-28 08:48:10

怎样设计响应式网站?

现在响应式网站是被大力推崇的,响应网页设计在UI圈也是很火热的,在这几年的发展中依旧不减热度,响应式网站要怎么设计?今天济南网搜科技小编来给大家说一下。

日期:2019-02-28 08:48:10

浅谈成功的响应式网站需要的功能

如今,随着智能手机的普及,站长们发现,从手机上来的流量一点不比在PC上来的少,所以,作为一种能够自动适应不同屏幕尺寸的网页设计方法,响应式网站设计正日益成为最受推崇的移动网页优化方式,那么一个成功的响应式网站需要有哪些功能呢?接下来小编做简单讲解。

日期:2019-02-28 08:48:10

浅析自适应和响应式的区别

响应式布局的网站依旧是很多客户的钟爱,响应式布局的网站的确不论是在什么设备上看起来都比较美观也比较方便,但是还有一种网站叫做自适应网站,目前很多人没法将两者进行合理的区分,甚至认为两者是同一种网页形式,本篇文章小编主要是带大家区分一下响应式和自适应。

日期:2019-02-28 08:48:10

手机站的SEO应该从那几个方面入手?

移动网站可以说是一个比一个做的漂亮,那么既然做了移动化的网站,那少不了的自然是移动SEO 优化,在 PC 端上你的网站可能在某个词上有排名,但在移动搜索引擎上,未必你会优先排名展现,那么对于手机网站的SEO我们可以从那几个方面入手呢?本篇文章小编给大家从五个方面做简单阐述。

日期:2019-02-28 08:48:10

关于我们

济南网搜网络科技有限公司专注于济南网站建设、济南网站优化,始终追求用最快的速度定制出最好的网站,我们一直在思考如何为客户创造更大的价值,让客户更省心

最新案例
网搜升降机械
网搜升降机械 济南网搜升降机械有限公司是专业是升降机械生产厂家,产品齐全,质量可靠
济南网搜电子科技
济南网搜电子科技 我公司是集生产、销售、研发于一体的专业电子科技公司,可为您提供专业产品服务
联系我们
  •   地址:济南市历下区山大路126号科苑大厦
  •   QQ:2894296051
  •  电话:0531-82392968
  •  付款方式
©2015-2016 版权所有 济南网搜网络科技有限公司 鲁ICP备16037118号  百度统计  流量统计:
全国公安机关备案号  全国公安机关备案号:37011202000373   XML