12.5K ·GitHub
What is this?
lib-flexible (amfe-flexible) is a legacy mobile web layout library that dynamically sets the root font-size based on the device's screen width, so page elements sized in rem scale proportionally across different screen sizes.
lib-flexible (amfe-flexible) is a legacy mobile web layout library that dynamically sets the root font-size based on the device's screen width, so page elements sized in rem scale proportionally across different screen sizes.Is this a framework or just a small utility script?It is a small JavaScript snippet/library, not a framework: it just sets the HTML root font-size on load, while a separate build tool (postcss-adaptive) converts your px CSS values into rem.
It is a small JavaScript snippet/library, not a framework: it just sets the HTML root font-size on load, while a separate build tool (postcss-adaptive) converts your px CSS values into rem.How do I add it to a project?Install it with npm, then import or inline it into your page so it runs before your stylesheet loads.
Install it with npm, then import or inline it into your page so it runs before your stylesheet loads.Do I need extra build tooling to use rem in my CSS?You write CSS with regular px values and use the postcss-adaptive PostCSS plugin during your build to automatically convert them to rem.
You write CSS with regular px values and use the postcss-adaptive PostCSS plugin during your build to automatically convert them to rem.Is this still the recommended way to build mobile layouts?No. The README explicitly says the project should be abandoned now that viewport units (vw/vh) are supported by most browsers, and recommends switching to viewport-based sizing instead.
No. The README explicitly says the project should be abandoned now that viewport units (vw/vh) are supported by most browsers, and recommends switching to viewport-based sizing instead.Why was lib-flexible created in the first place?Before CSS viewport units (vw/vh) had solid cross-browser support, developers needed a way to make rem-based layouts scale with device width, so Alibaba's AMFE team built this root-font-size script as a stopgap solution for mobile responsive design.
Before CSS viewport units (vw/vh) had solid cross-browser support, developers needed a way to make rem-based layouts scale with device width, so Alibaba's AMFE team built this root-font-size script as a stopgap solution for mobile responsive design.Should I start a new project with this today?No — given it's explicitly marked deprecated in its own README in favor of native viewport units, new projects should use vw/vh-based CSS instead of adding this dependency.
No — given it's explicitly marked deprecated in its own README in favor of native viewport units, new projects should use vw/vh-based CSS instead of adding this dependency.What are similar projects?fastclick, skrollr, responsive-html-email-template, material, vux, swiper, Respond, tailwindcss
fastclick, skrollr, responsive-html-email-template, material, vux, swiper, Respond, tailwindcssWhich topics is it in?responsive-web-design, postcss, front-end-development, mobile-web, alibaba, responsive, javascript-library, deprecated, css, china, mobile, web-development
responsive-web-design, postcss, front-end-development, mobile-web, alibaba, responsive, javascript-library, deprecated, css, china, mobile, web-development