search

mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

Add pxtorem #91

Closed xcatliu closed 7 years ago

ghost commented 7 years ago

It seems font size is seted to 18px in desk? Why?

xcatliu commented 7 years ago

@zmrenwu I'm still thinking about the need to set different font-size in mobile and desktop. And whether we need to use rem.

xcatliu commented 7 years ago

The pros to use rem is to easily change all size via root font-size, it's widely used in mobile webpages, like http://taobao.com If we don't need to change size along with viewport size, then we don't have to use rem.

ghost commented 7 years ago

@xcatliu Bootstrap4 beta only set font-size to 1rem for body. I think the browser would set root font size, typically 16px for desk, 12px for mobile though I doesn't do a survey to ensure it. But altering px to rem is pretty nice.

Further more, bootstrap4 beta has a lot of useful utilities to help layout easily, such as m or p for margin and padding setting and so on. Any idea of adding such plugins?

And, it seems flex plugin of mobi.css miss some flex box features, such as justify content between or align items themself in a flex box.

xcatliu commented 7 years ago

@zmrenwu You're right, I‘ve read the usage of rem again. We shouldn't set the font-size to html. It should be set by user-side.

For example, in chrome we have a setting option which can change the font-size of webpage. It'll not affect our page if the html element is set to a fixed px value.

So the right choice is leave html style empty, and set other font-size with rem

Utilities plugin is considered a third-party plugin. It'll not be included in the official Mobi.css bundle.

The flexbox plugin could be a lot better. Thanks for you advice, I'm considering add this feature