帝国cms移动端图片缩放问题

用jquery很简单的 test文字信息test文字信息test文字信息test文字信息test文字信息 $("test_class img")load(function(){ $(this)css({"margin-left":($("test_class")outerWidth()-$(this)width())/2+"px"}) });

不同手机屏幕的分辨率是不同的，因此在设计移动端应用时需要考虑按比例缩放的问题。这通常通过使用相对大小单位（如比例、百分比）和可伸缩布局来实现。
相对大小单位可以保持设计元素在不同分辨率的屏幕上具有相同的比例关系。例如，你可以使用相对单位（如 em、rem、vw 和 vh）设置字体大小、图像大小和容器大小，而不是使用固定像素值。
可伸缩布局可以自动调整和重新布局页面元素以适应不同大小和比例的屏幕。这可以通过使用响应式设计和流体网格来实现。响应式设计是指在同一页面上使用不同的样式表和布局规则，以响应不同分辨率和设备类型。流体网格是指使用相对单位和自适应列宽来创建可伸缩的布局结构。
最后，在设计移动端应用时，需要考虑不同屏幕密度的设备。通常，为了保持图像和图标在不同分辨率的设备上具有相同的清晰度和细节，需要提供多个版本的图像，并在页面中使用媒体查询来选择最合适的版本。
总之，在设计移动端应用时，需要考虑按比例缩放和不同设备的适应性。通过使用相对大小单位、可伸缩布局和多版本图像，可以实现屏幕适应性和优秀的用户体验。

现在需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式。

有多种方法可以实现这个效果，下面逐一介绍。

给padding的值设定为百分比时，将根据父容器的宽度来计算。

现在假设我们有一个div，我们希望它的尺寸能根据body（它的父容器）的宽度来实现固定比例：

样式部分

但是我们使用这种方法的时候需要注意几点：

其它比例
前面实现的是一个正方形比例的，那如果我想要是16:9的呢？
那我们将根据一个公式：width x / y计算，如下：

也就是说，网页的宽度是100vw，取一半就是50vw，无论怎么缩放都是一半，而且这个一半不止可以用在width上。

所以：

一个正方形就出来了~
其它比例
跟上面一样，通过公式可以得到：

盒子相对定位，绝对定位，宽度100%，就能铺满啦~

给盒子加上背景就能搞定！

完整：

参考
>

用CSS3 @media 查询 也叫“媒体查询”；

语法：

aaa{width:1200px;}    //正常样式

//下面是分辨率最小为300px，最大分辨率为1024px的样式

@media screen and (min-width: 300px) and (max-width:1024px) {
aaa{width:375px;}

}

可以参考：菜鸟教程CSS3 @media 查询

背景 ：首先用swiper实现了几个卡片类页面的滑动效果，初始状态为缩小状态，即（图1）：

问题 ：正常情况下是没有问题的，但是在ios12以下的系统会出现点击放大后马上又缩小的问题，且问题只出现在点击的那个‘卡片’， 滑动切换其他的都正常。
解决 ：找了很久，最终发现应该是页面在渲染的时候出了问题，页面元素已经到了全屏下的位置，但是看到的位置却不对。把重新初始化swiper的方法放到$nextTick()方法内就可以了。

---