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

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

发表日期: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

浅谈手机网站SEO优化技巧

移动互联网的兴起,人们越来越离不开手机,各大站长们也是看到了这一趋势,纷纷做起了手机端的网站SEO,现在移动SEO越来越成熟,尤其是这两年发展特别快,作为一名网站运营人员,该怎样进行手机SEO名网站运营人员,该怎样进行手机端网站SEO优化呢?

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

关于手机网站锚点的相关知识介绍

锚点链接一般用于比较长的网页,使用内部链接建立页内目录。单击目录跳转到文本的相应位置,最常见的如回顶部、模块间跳转等。

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

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

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

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

为什么你的网页设计看上去跟糟糕?

良好的网页设计是件很难实现的事情。一个好的网页设计,不仅吸引眼球,也是实用的、直观的、层级简单却足够复杂到保持用户的兴趣。字体、色彩、空白与内容间的完美平衡可以构成一个非常好看的设计,你的用户也会再次回来。而一个坏的网页设计,会把你的用户从你的网站上赶跑。一般来说,导致坏的网页设计的原因一般有这几个,接下来小编给大家做简单分析:

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

在移动端和电脑端百度的搜索结果为什么不同?

很多时候,我们在手机百度上搜索关键词在首页,但却在电脑端百度上再次搜索时结果却不一样,往往是让我们空欢喜一场,由此可见,百度在手机的搜索引擎排名与电脑的搜索排名是不一样的,那么为什么会出现这种情况呢?小编总结了几条原因,与大家共同分享。

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

关于我们

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

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