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

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

发表日期: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%;}这行代码对于大多数嵌入网页的视频也有效。


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


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


相关新闻

企业有没有必要建设手机网站?

很多企业建设了自己的PC网站之后,就会考虑是不是要建设一个手机网站?有没有必要建设一个手机网站?当然,很多互联网公司也会给出一定的建议,在这里小编想说,如果您不想丢失移动端的5亿用户,那么还是建设一个手机网站比较好。具体咱们再来讲讲为什么。

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

分析手机网站与电脑网站的不同之处

为了更好地开展网络营销,企业通常为制作一个电脑网站和手机网站,满足PC端和移动端的推广需求。那么,就济南网站制作方式来看,手机网站与电脑网站的制作有什么不同呢?

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

手机网站做好用户体验的十大关键

做好内容规划:首先,你要明确自己想在手机网站上展示什么,分析一下手机用户的浏览习惯,然后再有针对性地进行相关内容的制作,这样才能做吸引用户,并会为企业带来一定量的潜在用户。

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

浅谈手机APP和wap版的区别

关于APP大家应该非常熟悉,我们平时用的微信、支付宝、手机淘宝等等,都是APP,而且每部智能手机上也都会有系统自带的、不允许卸载的APP,那么APP和WAP版有什么区别呢?本篇文章小编给大家做简单讲解。

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

如何优化移动搜索引擎

移动搜索引擎的优化不仅是对网站的排名,也是对个人电脑终端的关系。如果一个网站的个人电脑和移动设备都是合理的,它至少可以在个人电脑网站排名中增加分。那么,如何优化移动搜索引擎?以下是对以上内容的详细分析。

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

关于手机站SEO的一些知识讲解

在移动手机用户群体中,百度依然占据搜索的龙头位置不可动摇,因此,手机网站优化 依然是面向百度这个最大的中文搜索引擎来开展。当然不是说用户体验不重要,是要以搜索引擎优化的前提下尽可能去照顾用户体验。

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

关于我们

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

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