手机端页面css初始化 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Nginx 适配PC和手机端页面

有时候我们需要针对不同的访问方式指定不同的页面或者URL。...如仅是几个静态页面进行切换，那么可以用js进行判断跳转，如：例子有两个页面，分别是 index.html、index_m.html; index.html(假定电脑端) 添加如下 JavaScript...代码： if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { 跳转手机...其实就是反过来： if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 匹配手机.../ { root html/pc; # 电脑版,默认 if ($mobile_rewrite = perform) { root html/m; # 手机版

1.6K2 0

手机端页面自适应布局---rem

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

2.5K5 2

您找到你想要的搜索结果了吗？

是的

没有找到

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; #如果是手机就让

1.7K3 0

自动PC端隐藏手机端显示CSS代码判断实现

上一篇说过在pc显示，手机隐藏的css案例。最近有用的到需要在电脑上自动隐藏手机端显示的例子。...PC显示手机隐藏:自动PC端显示手机端隐藏CSS代码判断实现实现场景描述：有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。...我们可以…实现方法:CSS判断控制路:.wppc{ display: none;}@media (max-width: 767px) { .wppc{ display: block !...important; }}在需要隐藏的区域加一个DIV，代码如下：你要css判断隐藏的内容在窗口大小超过767px会自动隐藏，小于则显示。...相关链接:百度知道: html+css如何能实现电脑端隐藏手机端显示PC显示手机隐藏:自动PC端显示手机端隐藏CSS代码判断实现

4.4K1 0

自动PC端显示手机端隐藏CSS代码判断实现

实现场景描述：有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。...我们可以使用下面的代码来实现：电脑端显示，手机端隐藏实现方法： CSS控制判断 @media screen and (max-width: 1221px) { .wapnone{display:none...; } } 在需要隐藏的区域加一个DIV，代码如下：你要css判断隐藏的内容的1221px表示如果屏幕尺寸达到了1221像素以下将会隐藏否则显示

3.2K1 0

自动PC端显示手机端隐藏CSS代码判断实现

实现场景描述：有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。...我们可以使用下面的代码来实现：电脑端显示，手机端隐藏实现方法： CSS控制判断 @media screen and (max-width: 1221px) { .wapnone{display:none...; } } Select Code Copy 干湿料槽在需要隐藏的区域加一个DIV，代码如下：你要css判断隐藏的内容 Select Code

4K0 0

通过页面配置兼容手机端的表格实现

数据表格兼容移动端电脑上开发的表格可以使用table或是类似的组件实现但是往往不适用移动端的屏幕一来，电脑是横的，手机是竖的而且数据量摆在那里，看起来不舒服改造端缩放 --> css...-- vant --> css/vant.css" /> 手机号" placeholder="请填写手机号" />

1.1K0 0

Css+Div设置电脑端显示，手机端不显示代码

Css+Div设置电脑端显示，手机端不显示代码在需要隐藏的区域加一个Div，例如想在手机端隐藏kongbiji这张图片，代码如下： <img src="kongbiji.jpg

3.3K2 0

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

一、webkit 内核移动端浏览器都是基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要兼容普通浏览器...与 webkit 浏览器 ; webkit 内核浏览器对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ============

2.2K1 0

HTML+CSS，PC端手机端公用部分样式代码整理(自己收藏)

把自己平时用的CSS公共样式整理发上来，方便自己查看也方便共享一：移动端公共样式 ---- /* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust...auto; width: auto9; /* ie8 */ display: block; -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/ } /* 初始化.../*单行溢出*/ .one-txt-cut{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*多行溢出手机端使用...-- js禁止手机浏览器里双击放大页面的功能？...-- 手机屏幕640px时调用 --> 三移动端HTML ---- <meta http-equiv="X-UA-Compatible

3.4K3 0

HTML+CSS，PC端手机端公用部分样式代码整理（建议收藏）

/*单行溢出*/ .one-txt-cut{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*多行溢出手机端使用...-- js禁止手机浏览器里双击放大页面的功能？...-- 手机屏幕640px时调用 --> 三、移动端HTML 端/手机端公用部分样式代码整理（建议收藏）由小维发表！...转载请注明：HTML+CSS，PC端/手机端公用部分样式代码整理（建议收藏） - 小维的个人博客部分素材来源于网络，如有侵权请联系删除！

2.7K2 0

详解JS判断页面是在手机端还是在PC端打开的方法

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端页面

7.9K3 0

初始化CSS

“每个前端都应该要有自己的一个初始化CSS” ? 做前端的人都知道，新建的html几乎所有的标签都是有margin和padding的，这对于写样式的时候影响很大。...每个前端都应该要有自己的一个初始化CSS，每个CSS也都会不同，像淘宝、腾讯、新浪这些大型的网站，他们的初始化CSS也各不相同，所以每个人的CSS并不需要照搬别人的。...这款初始化CSS，会造成很多是冗余的，像abbr、hgroup、figure等标签，我到现在为止都没用过，甚至没听过，所以这样的初始化CSS是不合理的。...我推荐使用Normalize这款CSS，相对和平，同时进行了一些bug修复 ? 只把常用的标签初始化了，当你想要用到这边没有初始化的标签时，再来这边添加。...然后再在里面添加一些自己认为需要加的初始化样式，这样就有了自己独一的一份reset.css。

6334 0

手机页面的前端开发工具_手机web页面

1.元素使用rem单位(相对于html的font-size，单位px) 1 /* 自动调节页面适配 */ 2 $(function(){ 3 (function(){ 4...changeHtmlFontSize(){ 8 var oContainerWidth = oContainer.outerWidth(); 9 oHtml.css...: 320px){ 10 #example { 11 font-size: 10px; 12 } 13 } 媒体查询样式的条件可以使用 and 满足想要的范围注意：手机页面都要加上这个

2.5K3 0

HTML+CSS，PC端手机端公用部分样式代码整理(自己收藏用)

auto; width: auto9; /* ie8 */ display: block; -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/ } /* 初始化.../*单行溢出*/ .one-txt-cut{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*多行溢出手机端使用...-- js禁止手机浏览器里双击放大页面的功能？.../web.css" >手机屏幕640px时调用 --> 三移动端HTML <meta http-equiv="X-UA-Compatible"

1.8K4 0

Reset CSS（CSS初始化）总结

那如何保持CSS在每个浏览器上的显示效果相同呢？这就涉及到了CSS初始化的问题。熟话说，先破后立。...CSS初始化的思想就是先把所有的默认值置为相同的，再把有需要的改成需要的值，这样所有浏览器的显示效果都会相同。...Yahoo CSS Reset： /*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /*...关于CSS Reset的讨论我在知乎上看到一个帖子，讨论Normalize.css 与传统的 CSS Reset 有哪些区别？上面说到： Normalize.css 是改良派。...body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。这确实有道理，任何事情都不能一棒子打死，存在即合理。

2.9K2 1

右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏

感觉还不错，只是部署到博客不太搭配（颜色太鲜艳了），用css加了个设备判断，电脑端显示、手机端隐藏。1221px 界点预览:图片图片css<!

4.5K1 0

thinkphp 本地配置手机移动端，在pc端访问手机端

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/113558.html原文链接：https://javaforall.cn

5.2K2 0

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画，有的属性在动画播放时却会不流畅，出现定格动画的效果，这里做个比较，方便我以后做动画。...color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性； length: 真实的数字...above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化 a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化具体什么css...属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。...引用自http://www.w3cplus.com/content/css3-transition 流畅度比较 (下面的比较中，左边永远比右边流畅的，而且比较的双方是它们都能做同一个效果，否则没有对比的意义哦

1.3K2 0

CSS屏蔽手机端长按选中防止图片自动放大禁止复制

使用手机浏览页面的时候，有些浏览器内核的原因，点击 img 标签图片会自动放大，长按会弹出下载或者保存选项。在写页面时如何避免此类情况的发生呢？我们可以使用 CSS 来屏蔽图片的选中。 ?...window.ontouchstart = function(e) { e.preventDefault(); }; 但是如果页面较长，滚动事件就失效。...2、通过 CSS3 属性实现。...再给元素的 CSS 中添加如下两行代码： -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 这时候禁止选中文字就没有问题了...声明：本文由w3h5原创，转载请注明出处：《CSS屏蔽手机端长按选中防止图片自动放大禁止复制》 https://www.w3h5.com/post/98.html

8.1K0 0

点击加载更多

Nginx 适配PC和手机端页面

手机端页面自适应布局---rem

Nginx根据Pc端和手机端访问不同页面

自动PC端隐藏手机端显示CSS代码判断实现

自动PC端显示手机端隐藏CSS代码判断实现

自动PC端显示手机端隐藏CSS代码判断实现

通过页面配置兼容手机端的表格实现

Css+Div设置电脑端显示，手机端不显示代码

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

HTML+CSS，PC端手机端公用部分样式代码整理(自己收藏)

HTML+CSS，PC端手机端公用部分样式代码整理（建议收藏）

详解JS判断页面是在手机端还是在PC端打开的方法

初始化CSS

手机页面的前端开发工具_手机web页面

HTML+CSS，PC端手机端公用部分样式代码整理(自己收藏用)

Reset CSS（CSS初始化）总结

右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏

thinkphp 本地配置手机移动端，在pc端访问手机端

css3动画在手机端的流畅度比较

CSS屏蔽手机端长按选中防止图片自动放大禁止复制

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐