imochen / hotcss Goto Github PK

View Code? Open in Web Editor NEW

2.4K 2.4K 621.0 837 KB

移动端布局终极解决方案 --- 让移动端布局开发更加容易

Home Page: http://imochen.github.io/hotcss/

CSS 81.50% JavaScript 9.47% HTML 9.03%

hotcss's Introduction

hotcss's People

Contributors

Stargazers

Watchers

Forkers

ljm1989014 sjclijie blackmao newhandsu xuanmuzhiguang zeelq basejs bl4ckn1ght keraun 14686039 dismals carpentercloud akalz jhonfang cometruer lujiabz 303182519 wyysf tianzi77 yangfei19881024 xiaohan2013 qv1256 otouc shunbocheng toobull junsong zj1212300224 x710894881 tianqi2786 holovesalt laborclx dwlsxj limingziqiang lingf lingtal-fork tsher liege cyhunter githubxun xxcanghai lottid freyhill yanaweb wyrover think2011 ifanqi rainweb pygf288 winglau14 dorislyx mypger morejoy gugaofeng killsos windancer bemysun jeff-ccj oliver1204 adonislau timy-life skyujilong ybning zjyhanxiao springxiege 121595113 ilumiere collectionfiler create-peace jocyci fliu2476 fegg webin gknpezgssb ybin1990 web1511 redgang xql279671304 hattoriheiji cucygh infinityboy bingbing0502 zorayoyo pingen small-black yongheng-wyh hejainwei unkushiro gnipbao wj704 trustjs marlon2 zjb65532788 xiangwanchun lxlneo harryyoo meihangbo lee66 lihongmi xyyueran nagerenxiong

hotcss's Issues

微信下的一个兼容问题

在mresize方法中，获取window.innerWidth存在兼容问题，在微信下，横向转屏，然后再转成竖向之后，获取到的值有问题。
改为如下写法没问题了：
var innerWidth = document.documentElement.clientWidth || document.body.clientWidth;

在iphone6以上的机型上用hotcss.js 会出现左右滑动

2K屏适配会出现放大的问题

2K屏适配会出现放大的问题（非2K屏都正常）

为什么不干脆都用 initial-dpr=1

既然 initial-dpr=1 能避免一些bug，为什么我们不默认就设置这个呢？

为什么移动端调试情况下的宽度是页面元素选择body的宽度的一半

建议增加：stylus预编译px2rem文件

px2rem.styl

px2rem( _px )
  return unit(_px*320 / _designWidth /20,'rem')

会对iframe,第三方组件也起到作用，导致第三方页面和组件失真。

请问怎么配合postcss-plugin-px2rem使用

我现在的项目使用的vux组件框架，webpack和vue-loader，我看hotcss的px2rem的转换公式是$px*320/$designWidth/20 + rem，和那些postcss的px2rem的插件公式都不一样。

怎么解决微信二维码问题？

什么方法能够解决微信长按扫描二维码？

安卓的dpr靠谱么？

对比了一下hotcss和淘宝的flexible，看起来最大的不同就是你们考虑了安卓的dpr（不知道对不对）。
这个在实际中没遇到什么问题么？

ios上微信会出现blink的bug

hotcss.js 算是不是有点问题

我用 postcss-px2rem remunit 设置为 37.5 即是一倍图, 在iphone6模式下, 我设置40px字体大小, 显示出来不是40px大小呀, 用flexible.js的话就是40px的

js动态设置font-size和你们的解决方案有什么区别吗？

图中的7.2就是设计稿大小为720，如果是640的设计稿可以改成6.4，这样1rem=100px;比如有个div高度为80px，则css中可以这样子写div{height: 0.8rem;},这个和你们这种解决方案有什么区别吗

写css只能用less或者sass？

不能直接在css文件里写？？

ios系统更新9.3后微信bug

iphone6 系统更新到9.3后，用了hotcss屏幕就可以横向拖拽，就像是宽度超过100%一样

有些地方没有加分号，js压缩后报错

位置：
hotcss.px2rem
hotcss.rem2px
hotcss.mresize
setTimeout

当一个元素文字，字数多的情况和文字字数少的情况下设置字体大小会出现问题

同样的元素，设置字体大小，文字内容。在文字多的情况下和文字少的情况下
会出现文字大小不一致。也就是文字小的文字大小和文字多的文字大小不一致

在ios下长按图片的时候有所偏移

有没有遇到一个问题，就是用hotcss，在ios下长按图片的时候有所偏移，他会跑到

<body class="body-style">
<div style="height: 200px;"></div>
<div>
    <img style="width: 400px;height: 300px;" src="http://jzimg.oss-cn-shenzhen.aliyuncs.com/user-dir/Tbzd8mN8dt.JPG">
</div>
</body>

建议：关于增加grid布局插件

如果可以增加一个移动端的grid布局小插件一起配合使用，就更完美了。

在安卓app中viewport无效

我们公司的安卓app内置的webview当中viewport好像并没有生效，1px的线还是那么粗！尝试做了 settings.getUserAgentString();
//增加下面两行代码：
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
但还是没有效果，请问是需要其他的什么配置吗？

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

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

小米note下计算错误

使用px时，小米各机型会出现不同问题

小米note:

红米note2:

在iPhone6plus下有些字体变大了！！

单位显示都正常，计算出的字体却变大了

font-size问题？

font-size 也用 rem 的话，宽屏、窄屏上字号相差太大。
可能要根据 device-pixel-ratio 设置 body 的font-size，内容的font-size都使用 em。

安卓手机不识别scale<1 怎么办？

跟手淘的flexible好一致...

跟手淘的flexible好一致。

iphone 6s 顶部fixed定位

iphone 6s 顶部fixed定位 top:0,然后内容滚动时顶部栏有很窄一条空隙。
求解答

怎么处理px为负值的情况

编译平台: koala
类似margin-left: -px2rem(210); 报错

hotcss 如何与类似mint-ui这种ui框架兼容

可以应用到 PC端吗？

如题

px2rem

想问一下，*320 和 /20
320 是ideal viewport
那 /20 代表什么呢？

normal example中的body:16rem;

请问这个 16rem 是什么意思呢？

parseInt(px,10)*320/designWidth/20

这个 320 和 20 是根据什么来的？

关于设置的除以20的问题

看到js里乘以20，px2rem的css中除以20不知道这个20有什么意义吗？谢谢指教

手机横屏后再竖屏渲染不正确

是否考虑在库里面加上手机旋转事件，触发的话自动重新渲染

请问如何在fis3中使用 px2rem.less ？

less文件编译用的是fis-parser-less，感觉px2rem.less没有起效，fis3的用户有碰到此问题的吗？

px2rem(1) 安卓不显示---iphone6可左右拖动

请问怎么引入到vue中？

vue-cli3中按照常规引入hotcss无效如果正确引入？

meta自动添加缺少iPhone X的适配

自定义name="viewport" meta无效
在hotcss.jsmeta中加入 viewport-fit=cover才行

通过npm i hotcss 下载下来的文件缺失

只有 README.md 和 package.json 文件， npm官方源。

安卓系统webview打开适配失效

安卓系统webview打开hotcss适配的页面发现适配失效

不设置高度字体内容会变大

不设置高度字体内容会变大
有的情况下，需要让内容自动将元素的高度撑开，但是不给这个元素设定高度，元素的内容超过一行的时候整个页面，的字体会变大

Sublime新建代码片段，让hotcss更顺手

hotcss Sulime text 代码片段

在使用hotcss的过程中会经常输入px2rem和data-dpr，你感觉麻烦吗？不要紧，sublime代码片段可以帮助你。

如何使用

Sass开发环境下

在使用此代码片段前，请保证您的sublime已安装scss插件，插件安装方法这里就不做解释了。还不会的童鞋请点击这里

先现在这两段代码片段

px2rem 点击下载

data-dpr 点击下载
打开sublime text，菜单栏找到preferences->Browse packages->user
把下载好的文件直接放进去就行了
尽情的撸码了！

Less开发环境下

同sass一样，请安装Less插件

同样下载这两段代码

px2rem 点击下载

data-dpr 点击下载
打开sublime text，菜单栏找到preferences->Browse packages->user
把下载好的文件直接放进去就行了

用sublime打开这两个文件

<scope>source.scss</scope>
//把上面这段话更改为
<scope>source.less</scope>

拓展阅读

Sass篇

Sass官网

Sass教程

Less篇

Less官网

Less教程

希望添加2个参数配置

现在发现源码里面有20和320的字样；
应该是在320px宽度的设备上1rem=20px吧
现在设备发展很快啊，我们都是具有iPhone X的375px宽度上开发的，还有我们的希望配置的1rem=50px;
配合 postcss-pxtorem插件的rootValue:
如下postcss.config.js 配置

const pxtorem = require('postcss-pxtorem')

module.exports = {
  plugins: [
    flexbugsFixes(),
    autoprefixer({
      flexbox: 'no-2009'
      // overrideBrowserslist: ['> 1% in CN', 'android >= 4.4.4', 'ios >= 9', 'not IE 11'] // target = 'desktop'
    }),
    process.env.REM_ENV && pxtorem({
      rootValue: pkgJSon.remUnit, // 配置自动转换的50
      propList: ['*'],
      mediaQuery: true
    })
  ].filter(Boolean)
}

然后使用

<meta name="hotcss" rem-unit="50" device-width="375">

是否可以呢？

如果你这边改了我以后推广就推广你这个github,不然我自己fork改一下

才发现这个项目fork这么多，魔改的很多啊