展开

关键词

自适应布局---rem

rem布局,在中引入这都js代码。 否则,中html的font-size大小为:100*(当前宽度 / 640)。 1. 为什么是640px 对于屏幕来说,640px的宽度是一个安全的最大宽度,保证了移动两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。 根据上的js代码,如果宽度低于640px,那么中html的font-size也会按照(当前宽度/640)的比例变化。 大家可以看看淘宝的这个 淘宝站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。 最终代码首代码大致如下 <!

12141

Nginx根据Pc访问不同

有的时候一个网站需要区别是pc访问的 还是访问的,根据平台的不同让他跳转到不同的入口;可以这样实现: server { ### nginx 用来当静态资源的服务器 listen 83; server_name localhost; underscores_in_headers on; # 是还是pc set $mobile_rewrite ispc; if ( set $mobile_rewrite ismobile; } location / { root /home/xxxx; set $myindex pc.html; #如果是就让

19030
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery上拉下拉刷新源码

    DOCTYPE html> <html> <head> <title>jQuery上拉下拉刷新代码 - 蚂蚁社区-开源源码社区</title> <meta http-equiv="Content-Type

    35920

    上演示H5

    教大家如何把自己的H5进行预览测试: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

    78880

    使用weinre调试

    同时列出了client及server信息。 3.   假设我们要调试的运行在10.136.30.144:3927 中引入js后,用浏览器打开待调试 http://10.136.30.144:3927/new 4. 开始调试 访问后,我们回到步骤2中所说的调试界。发现此时,targets中多了一条,即是我们在步骤3中用打开的待调试。 ? 点击该target,即可利用熟悉的调试界进行调试了。 ? 其它说明 1. 用连续访问多,这些都会在targets中列出,选中其中一个,即可进行调试。 2. 特别是当你要调试iphone上又无mac book时,试试weinre吧。 啥?你连iphone都没有!?god bless you~

    24330

    html适配方法

    device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> viewport :用户网的可视区域 initial-scale:初始缩放比例,也即是当第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 user-scalable:用户是否可以动缩放。

    20420

    Android仿京东类别

    京东的类别标签, 是一个左侧滑动可选择类别, 右侧一个类别明细的列表联动. 当用户选择左侧选项, 可在右侧显示更多选项来选择. 实现方式也不少. 如果觉得包含的Fragment太多, 左侧直接给一个ListView就可以了.不影响效果. 效果图: ? 里使用ScrollView装载所有数据,可以动态的addView(),removeView(), 网格布局使用GridView. 由于Fragment, 所以更新数据和更新View都非常方便, 所以例子中直接用静态模拟数据了. 重在通过简单的例子解释这种实现思路, 当然实现不是唯一的. 到这里右侧的简单模拟实现就结束了,都是一目了然的代码.

    16710

    基于zepto的微信微场景HTML5特效

    page处是管理图片的,在改div中添加删除图片及图片中的相关组件,如在div标签为page page-9中添加的Button组件。

    38710

    基于touchSwipe微信微场景HTML5特效(适用于PC

    这是适用于一个PC(电脑)的下拉滑动切换网的效果实现。 相关文章推荐: 基于Zepto的微信微场景HTML5特效 代码 主要HTML代码

     JS代码 1、动画不重复版 即动画过去,再滑动到该动画不显示 function (event) { event.preventDefault(); }, false); */ </script>  2、动画重复之简单版 这个是不需要在单对某一元素单独使用 function (event) { event.preventDefault(); }, false); */ </script>  2、动画重复之复杂版 这个是可以对单元素进行各种自定义的

    74410

    上显示PDF文件

    demo:http://mozilla.github.io/pdf.js/web/viewer.html

    23100

    卫士设置向导

    设置向导,通过SharedPreferences来判断是否已经设置过了,跳转到不同的 自定义样式 在res/values/styles.xml中 添加节点<style name=””>,设置名称属性 在<style>节点里,添加节点<item name=””>设置名称属性,就是布局的各种参数 在<item>的文本里,设置布局的各种参数值 在布局文件中引用样式,style=”@style/xxxxxxxxxxxx 引用android系统的图标,例如:@android:drawable/star_big_on 图标垂直居中对齐,使用对齐属性 android:gravity=”center_vertical” 引导的小圆点 40dp" android:background="#2D89EF" android:gravity="center" android:text="1.防盗设置向导 android:layout_marginLeft="10dp" android:layout_marginTop="8dp" android:text="防盗包含以下功能

    22130

    上显示PDF文件

    demo:http://mozilla.github.io/pdf.js/web/viewer.html 项目地址:https://github.com/moz...

    35290

    2022开篇H5特效

    今天我们就来说一下H5的特效吧;都2022年还H5?没办法H5实在太深入人心了,特别是在微信开放了外连接H5又变得重要了。所以就说一下最近开发H5的一些经验。 1、横竖的判断 移动天下先行,现在基本是70%的载体(余下的pad咯);那么有一个问题就是竖屏和横屏的长宽高都不一样,那么对整体的布局都会发生重要的影响。 ,如果进入后对进行横竖能否即时判断呢? body { -webkit-transform: rotate(90deg); } 这样整个就会顺时针翻转90°。。有什么作用?存在即合理,以后有它的用途。 3、的重力感应与陀螺仪应用 现在能上H5的基本都是智能,一般情况下都带有重力感应与陀螺仪;那这2个有什么用?可以感应到的角度和移动的速度。

    160110

    【飞起】教你如何前秒开!!

    在网上也是一样,网打开的速度快点,再快点,还能再快点吗?! 所以在前开发领域,速度是一个永恒的话题。 1、尽量减少HTTP请求次数 2、减少DNS查找次数 3、避免跳转 4、可缓存的AJAX 5、推迟加载内容 6、预加载 7、减少DOM元素数量 8、根据域名划分内容 9、使iframe的数量最小 10 -- --> 如果同学们仔细的读过,甚至是研究过网站优化方的资料,你会发现,网站优化是一个很大的系统性的工程。如果把优化的重心只放在前,那么只能做到优化,而无法做到网站的优化。 如果你给你的网站的带宽是adsl小水管,那么我相信,无论前再怎么优化,用户访问你的网站也是龟速。 所以第一步就是CND加速,这个是硬件方的,是要花钱的!当然了,许多老板一听花钱,脸就拉长了。 <! 这方的内容很多,今天先写到这里,看看同学们的反应哈,

    63730

    详解JS判断是在还是在PC打开的方法

    在index.html里配置js控制选择那一个文件夹下的文件就可以了。 我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息。 iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) { //跳转移动 wap.baidu.com" rel="external nofollow" rel="external nofollow" ; } else { //跳转pc

    69930

    移动屏幕分辨率自动缩放的js

    ,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小模式浏览的时候,上的值为逻辑分辨率,调试的时候很难把控样式 ,在的样式也会因此大乱,在头部加入以上一段js之后,在就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的宽度,750是按iphone6 来设计(根据自己使用需求来修改),即让的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应的效果。 试想,浏览器如果把电脑的980px的网展现在宽度为750px的iphone6屏上,势必会放不下,横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如 ; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在中展现电脑没有出现横向滚动条

    1.7K70

    的一些有用的meta

    -- 忽略中的数字识别为电话,忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no" /> <! -- 针对持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!

    10621

    相关产品

    • 云端智造协同平台

      云端智造协同平台

      云端智造协同平台(CIMCP),云端部署并运行在手机、平板、电脑端,覆盖采购、排程、生产、物料、质检、设备等核心制造流程,帮助工厂低成本、高效率地实现从客户下单、原料入厂到成品出厂之间的全链路数字化管理。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券