手机网站

响应式图像正确设置方法

响应式图像正确设置方法,代码如下:

PC,平板,手机显示良好:

我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像,适应不同像素密度的屏幕。

通过 媒体查询,来为不同宽度的屏幕设置不同的图片。

其中,1x 2x 3x 代表设备像素比

通常 pc的设备像素比为1,iphone7为2,iphone7 plubs为3,一些手机为4,还有一些为1.5,3.65等非整数值。

在下面,所有的设备像素比都要用同一张图片,这样才能显示正常。…

                

WAP2.0手机网站的开发

前一阵帮着学校开发了WAP2.0的手机版学校首页。http://wap.chd.edu.cn

从零基础入门,总体来说上手还是挺容易的,现在就来写一写关于我在wap2.0开发中遇到的问题,一来记录一下自己进行的第一个项目,二来也是给大家做一个参考,因为WAP2.0还算是比较新的东西,可参考的资料比较少。我在开发初期根本无从下手,无法找到大量的相关的准确资料,大多数在网上找到的都是一些不经过实践的copy文章,许多东西根本行不通。…