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

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

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

浅谈建设手机网站的3个方式

手机网站建设在移动互联网时代中有着很重要的地位,企业通过手机网站,能够带来更快的传播效果,并且满足移动端用户的体验。而大家又知不知道,做手机网站建设可以有三种方式进行,分别是:自助建站、模板生成、自适应建站,就让我们一起来了解下吧。

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

浅谈制作手机站时需要注意的一些知识点

互联网迅速发展的时代,尤其现在多数人把目标放在了移动端上边,所以移动端网站的建设、推广宣传等成为了当下热潮,要知道移动端网站和PC站也是有很大区别的,所以在建设移动端网站的时候有些知识点是大家必须要知道的。

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

建设一个手机网站需要知道哪些内容?

互联网的时代,给很多企业、个人都带来了很大的便利,也推动了创业与投资,尤其是创业这一方面,很多人将焦点放在了手机端,手机端这个大用户群体,的确是能带来很大的利益,那么关于手机端网站建设的时你需要知道的内容,小编就给大家做简单概述。

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

浅析几种APP的推广方式

随着小程序的上线,虽然对APP有所冲击,但依旧有很多人开发APP,APP开发完成后就是运营推广了,推广的方式有很多种,线下、线上都可以,那么本篇文章小编就给大家讲述一下APP的推广方式。

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

建设手机商城网站有哪些优点

随着智能手机的普及以及移动互联网的发展,越来越多的移动产品随之上线,很多企业在建设企业网站的同时也会选择建设商城,而手机商城则成为了企业的首选,移动互联网客户群体之大、增长速度之快是让我们倍感震撼的,那么建设手机商城网站到底有哪些优势呢?小编给大家总结:

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

关于我们

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

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