手机网站

我应该使用哪些媒体查询断点?

在弄清楚要使用哪些媒体查询断点之前,我们需要查看我们要设计的设备。

我已经研究了一些常见的设备分辨率,并且大多数可以分为几类。我列出了这些类别,以及它们可以满足的分辨率:

  • 移动肖像320像素至414像素)—适用于4“至6.9”屏幕的设备。
  • 移动横向(568像素至812像素)—相同,但横向。
  • 平板电脑肖像768像素至834像素)—适用于设备7“至10”
  • 平板电脑横向(1024像素至1112像素)—同上,肖像上也有12英寸平板电脑
  • 笔记本电脑和台式机显示器(1200px +)-变化很大,但通常为1200px以上

下一步:那么我们如何理解这些设备?

响应式图像正确设置方法

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

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文章,许多东西根本行不通。…