imwtr / Rem Vw Layout
Licence: mit
移动端 REM布局 与 Viewport (VW) 布局的实例运用
Stars: ✭ 176
Projects that are alternatives of or similar to Rem Vw Layout
vw-layout
Mobile website layout with viewport units
Stars: ✭ 47 (-73.3%)
Mutual labels: layout, viewport
Android Fadingedgelayout
A versatile layout that fades its edges regardless of child view type.
Stars: ✭ 162 (-7.95%)
Mutual labels: layout
Android Statefullayout
A custom Android ViewGroup to display different states of screen (CONTENT, PROGRESS, OFFLINE, EMPTY, etc.)
Stars: ✭ 140 (-20.45%)
Mutual labels: layout
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+1427.84%)
Mutual labels: viewport
Popuplayout
通用弹出布局辅助库,允许开发者从顶部、底部、左侧、右侧和中心这五个位置弹出自己指定的View。The general pop-up Layout Assistant library allows developers to show their own view from the top, bottom, left, right and center five locations.
Stars: ✭ 135 (-23.3%)
Mutual labels: layout
Cutintolayout
CutIntoLayout allows you to erase the background.
Stars: ✭ 172 (-2.27%)
Mutual labels: layout
Expansionpanel
Android - Expansion panels contain creation flows and allow lightweight editing of an element.
Stars: ✭ 1,984 (+1027.27%)
Mutual labels: layout
Swipelayout
A library what allows you to execute a swipe for the android platform
Stars: ✭ 150 (-14.77%)
Mutual labels: layout
Flourish
🎩 Flourish implements dynamic ways to show up and dismiss layouts with animations.
Stars: ✭ 150 (-14.77%)
Mutual labels: layout
React Viewport Slider
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Stars: ✭ 144 (-18.18%)
Mutual labels: viewport
Viewport.jquery
viewport.jquery - simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport
Stars: ✭ 156 (-11.36%)
Mutual labels: viewport
Mobile Web Favorites
This is a favorites, with a mobile web tips.
Stars: ✭ 1,724 (+879.55%)
Mutual labels: viewport
Vlayout
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
Stars: ✭ 10,818 (+6046.59%)
Mutual labels: layout
移动端布局方案
本项目为移动端 REM布局 与 Viewport (VW) 布局的实例运用
提供三个布局方案
1. REM 布局
http://localhost:4321/rem/index.html
使用js动态设置html的font-size,css使用rem单位,文本大小可选择使用px
js设置viewport的scale以支持高清设备的1px
可设置页面最大最小宽度
2. VW 布局
http://localhost:4321/vw/index.html
css使用vw单位,文本大小可选择使用px
使用transform以支持高清设备的边框1px(包括圆角),使用 @mixin ./vw/scss/_border.scss
可设置容器固定纵横比,不可设置页面最大最小宽度
3. REM + VW 布局
http://localhost:4321/vw-rem/index.html
html的font-size使用vw单位,css使用rem单位,文本大小可选择使用px
使用transform以支持高清设备的边框1px(包括圆角),使用 @mixin ./vw-rem/scss/_border.scss
可设置容器固定纵横比,可设置页面最大最小宽度
解析说明
使用
-
cd rem-vw-layout
进入项目 -
node server
启动Node服务 -
访问上述三个页面
-
业务代码中样式的调用方式可参考
./rem/scss/rem.scss
及./vw/scss/vw.scss
及./vw-rem/scss/vw-rem.scss
三个文件;可在html文件相应位置配置data-content-max
属性来限制容器最大最小宽
DEMO
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].