search

imochen / hotcss

移动端布局终极解决方案 --- 让移动端布局开发更加容易
http://imochen.github.io/hotcss/
2.4k stars 621 forks source link

关于$designWidth变量我想根据手机的不同宽度去动态设置 #5

Closed Gerkeyoung closed 8 years ago

Gerkeyoung commented 8 years ago

你好！ 想请教一下:$designWidth这个变量在scss中我不想写死，我想根据手机屏幕宽度去动态设定它，想问一下，该怎么处理？谢谢！

sjclijie commented 8 years ago

这个不需要动态设置，这是设计稿的尺寸

Gerkeyoung commented 8 years ago

那如果这样的话，这个方案只能是适用于某一个设计稿尺寸，如果现在做混合开发，就有多套设计稿，这个尺寸如果能自己根据不同手机的宽度去动态设定，那就可以适用于多套设计稿。。就是现在我想，这个$designWidth变量能够动态设定，在不同的手机屏幕下，展现不同宽度的适应性。就不只是一种设计稿了！谢谢

imochen commented 8 years ago

因为scss最终会编译成css。所以在运行过程中是没有动态$designWidth概念的。 如果是多套设计稿，即使$designWidth可以动态设定。你的css也不会是一样的。 重新写一个scss文件，在scss中定义$designWdith即可，但意味着你要再写一套css。

Gerkeyoung commented 8 years ago

首先谢谢你们得回复，不过我再说下我的看法：$designWidth 这个动态指定是:它自己根据不同手机的宽度去赋值，在宽度不同的手机上(如果$designWidth这个根据手机不同宽度去赋值),css就不一样了，这样css在不同的手机上本身就不一样了。。这样的话，就没有多写几套css的事了。。。 谢谢了！所以现在我就在想：在scss文件中的 $designWidth 怎样和js结合在一起?利用js去赋值？

dctxf commented 8 years ago

$designWidth是scss里面的东西，比如你的设计稿宽度是750，那么你就可以这样写

$designWidth:750;

跟js没有半毛钱关系

zq741235 commented 8 years ago

$designWidth是设计图的宽度。根据手机不同宽度来定义的是那个js.js会给根元素html赋大小。建议先看看rem是什么

imochen commented 8 years ago

是这样，$designWidth是与手机宽度无关的。

hotcss遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。

hotcss会将你的页面，在不同大小屏幕下自动缩放保持一致的比例。 如果你的设计稿尺寸和内容都不一样，那简单的修改$designWidth是无法解决的。 相反，如果你的设计稿尺寸是多个，但比例都是一样，只是大小不一样。那使用其中一种尺寸就会自动等比缩放的。

dongjianguo commented 8 years ago

..不是这样子的，你可以选择一个比较主流的设计尺寸，然后使用hotcss，最后你就可以得到一个在各个手机显示基本一致的网页了。

Gerkeyoung commented 8 years ago

好像我考虑错了，谢谢大家了！