All Projects → imwtr → Rem Vw Layout

imwtr / Rem Vw Layout

Licence: mit
移动端 REM布局 与 Viewport (VW) 布局的实例运用

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
Uistatus
一个简单且强大的Ui状态视图控制库!
Stars: ✭ 137 (-22.16%)
Mutual labels:  layout
Paiges
an implementation of Wadler's a prettier printer
Stars: ✭ 153 (-13.07%)
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
Muuri React
The layout engine for React
Stars: ✭ 163 (-7.39%)
Mutual labels:  layout
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
React Virtual List
Virtual list in React
Stars: ✭ 147 (-16.48%)
Mutual labels:  viewport
Easypeasy
Auto Layout made easy
Stars: ✭ 1,877 (+966.48%)
Mutual labels:  layout
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (-1.7%)
Mutual labels:  layout
Tuicss
Text-based user interface CSS library
Stars: ✭ 167 (-5.11%)
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

可设置容器固定纵横比,可设置页面最大最小宽度

解析说明

解析说明

使用

  1. cd rem-vw-layout 进入项目

  2. node server 启动Node服务

  3. 访问上述三个页面

  4. 业务代码中样式的调用方式可参考 ./rem/scss/rem.scss./vw/scss/vw.scss./vw-rem/scss/vw-rem.scss 三个文件;可在html文件相应位置配置 data-content-max 属性来限制容器最大最小宽

DEMO

  1. REM 不限制最大宽度 REM

  2. REM 限制最大宽度(计算基准与容器) REM

  3. REM 限制最大宽度(仅计算基准),某种流式效果 REM

  4. VW 不限制最大宽度 VW

  5. REM + VW 不限制最大宽度 REM + VW

  6. REM + VW 限制最大宽度(计算基准与容器) REM + VW

  7. REM + VW 限制最大宽度(仅计算基准),某种流式效果 REM + VW

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].