![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
援笔赋惊鸿
人生总是在转角处发现更多的风景
展开
-
『REM』手机屏幕适配
rem以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,首先我们来看看使用 rem 实现手机屏幕适配的常用方案。以设计稿的宽度为640px,即:designWidth = 640,同时设定在640px屏宽下 1rem=100px ,即:rem2px = 100。设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候,通过直接位移小数点的方式,就可以将UI图中测量原创 2017-10-31 10:40:44 · 341 阅读 · 0 评论 -
实现input移动端自动获取焦点以及数字键盘搜索功能
最近项目中需要做一个搜索功能,其中就有自动获取焦点以及数字键盘快捷搜索,下面就跟大家分享一下我的实现方法:首先跳转到搜索页面input自动获取焦点,按常规写法就是加个autofocus或者页面加载完成后立即给input加个focus()方法,但是这样进入页面的时候焦点会自动消失,这就需要加个定时器让他延迟一点获取焦点就OK了,代码如下:html页面:<input #searchbar typ...原创 2018-03-21 11:01:34 · 3951 阅读 · 0 评论 -
移动端页面自适应布局
添加下列js代码,如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)然后使用rem作为单位,1rem=100px,这样页面就会随屏幕大小自动计算变化尺寸代码如下原创 2018-07-17 16:16:54 · 448 阅读 · 0 评论