min让PC网站适应移动端

最新推荐文章于 2024-11-21 08:45:23 发布
置顶 最新推荐文章于 2024-11-21 08:45:23 发布
阅读量462 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/songsong189/article/details/73330995
版权

     前段时间产品经理来找我说能不能让PC网站适应移动端，我看了看那个网站发现并没有用到什么框架所以网站的静态资源特别少，代码运行快所以想再不用框架的情况下来适应我已开始看了看。

   因为网页布局的时候有宽度100%的地方所以在手机上看时会有一部分有底色的地方会显示不出来，如果有版心控制的话还好但是现在是没有版心的，而且也不想在给一个一个的添加底色页面看起来就想补丁一样，后来我用了一个很巧妙的东西就是min-width设置成版心的大小，这样一来就可以看到了！

   像这种情况还可以用响应式的媒体查询，不过PC端我还是觉得用响应式的媒体查询还是有点不大好！因为这样一来你写的样式代码就又多了好多

PC端和移动端的适配问题
qq_50563868的博客
07-03 4064
PC端和移动端的适配问题
vue pc移动两个html,vue一套代码适应移动端，pc端
weixin_28676973的博客
06-10 2130
一、使用场景：有适配pc端改为适配pc端和移动端，使用2套css代码实现App.vuecreated: function () {if(document.documentElement.clientWidth > 640){require('./style/index.：');this.plaform = 'pc';}else{require('./style/mobile.scss');t...
网页在移动端上显示不完整
ymyqs的博客
07-11 1万+
网页在移动端上显示不完整网页开发中遇到的一个常见的问题： 网页在移动端上显示不完整 网页在chrome上的移动端调试模式下显示不完整 具体表现情况如下 - 上图为360极速浏览器下的移动端调试模式原因分析 可以看出，由于html样式的宽度只有980px，而实际需要是1200px 解决方法 在样式标准添加或修改 html{min-width: 1200px;} 具体多少按实际情况
CSS来适配PC和手机端
wuyongde0922的专栏
07-20 4269
直接上代码，可以根据设备宽度来区分，下面的max-width好像无效 @media only screen and (min-device-width: 120px) and (max-device-width:780px) and (-webkit-min-device-pixel-ratio: 2) {     .layui-table-view {         overflow: au...
将pc端的网页自适应显示在移动端
乖_疯zI
08-03 1万+
当我们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版（ios默认的是980px，Android4.0以上为980px），然后通过比例缩放看到整个页面的全貌。 但是,使用默认的viewport布局会有以下缺点： 宽度不可控制，不同系统不同...
如何让 Vue.js 网站在 PC 端自适应移动端
2202_75337835的博客
09-09 1639
随着移动设备的普及，确保网站在各种设备上都能良好展示已经成为网页开发的重要任务。Vue.js 是一个现代的前端框架，非常适合构建响应式网站。本文将介绍如何使用 Vue.js 实现 PC 端网站的移动端自适应，确保你的应用在不同屏幕尺寸下都能提供良好的用户体验。
pc端兼容移动端
zt199718的博客
07-05 712
pc端兼容移动端 1.网页头部写viewpoint 2.两种布局去兼容移动端 上中下排布 上中（放一个空盒子）下 外面的盒子display:flex;布局 空盒子给flex:1; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
网页自适应pc端和移动端
稳哥的小灶
03-01 2万+
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。  于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 下面让木易设计来告诉大家。   很多网站的解决方法，是为不同的设备提供不同的网页，比如专门...
基于VUE实现判断设备是PC还是移动端
10-15
在前端开发中，有时我们需要根据用户使用的设备类型来提供不同的界面体验，这通常涉及到判断设备是PC还是移动端。Vue.js，作为一个轻量级且强大的前端框架，提供了多种方式来实现这种设备判断。本文将详细介绍如何在...
PC、移动端自适应等比缩放布局方案
11-16
### PC、移动端自适应等比缩放布局方案 随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...
解决PC端和移动端的CSS简单适配问题
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-21 123
不同端的适配作为前端"资深"切图仔（开个玩笑，还在学徒中），很多时候，我们开发的项目只在PC端运行，但是也会在手机移动端内访问，所以我们更多时候需要考虑网站在PC端和移动端是否适配问题，接下来就是我在学习中学到的适配技巧哦，快学起来！问题场景今天在做移动端demo的时候，发现了一个让人难以忍受的css适配问题，如果不做屏幕适配的话，代码量真的太大了，后来发现了一招，可以简单快速的解决这个问题。我们...
微信小程序中进行地图导航
热门推荐
郭蕾蕾 努力的包子
04-06 4万+
微信小程序中进行地图导航
项目开发之rem加媒体查询实现移动端布局
郭蕾蕾 努力的包子
11-06 9510
这次小编将要拿一个实际开发来将布局，首先我们拿到美工给的图一般会分为两种格式一种是640的图一种是750的图这两种图其实的效果是一样的只不过给,我们得到的测量数据不同，所以其他都是一样的，这里我们就拿640的来讲解。         我们将屏幕分为20份（这里随便只不过20份比较好计算），然后我们可已经640的屏幕分为20份每一份是32px;所以我们在计算的时候例如：获得一个尺寸为 28 转化为
zepto实现移动端轮播图
郭蕾蕾 努力的包子
11-02 8792
zepto是一个移动端的框架，语法几乎跟jQuery一样，但是因为移动端模块化开发的思想所以zepto较多的应用于移动端，节省移动端的流量，虽然现在4G时代的到来，流量的价格很便宜，但是zepto对于移动端有着很好的SEO优化效果！
小程序之解决移动端点击和长按事件冒泡问题
郭蕾蕾 努力的包子
03-01 7289
如果我们希望一个对象被长按的时候不会触发点击事件，如果你同时绑定上bindtap事件和bindlongtap事件的话这里会有一个问题就是不管你有没有点击，长按的时候就会触发点击事件，我们有一个需求就是在点击的时候跳转页面，但是在长按的时候删除某个对象。      所以这个时候我们就要考虑自己封装了      wxml        .js   toDetail:function(op
解决小程序tabBar跳转不能带参数问题
郭蕾蕾 努力的包子
03-30 7013
解决小程序tabBar跳转不能带参数问题
bootstrap原理分析
郭蕾蕾 努力的包子
11-02 5196
bootstrap原理分析
怎么把html做成适应移动端跟pc端的样子
最新发布
12-19
将HTML设计成适应移动端和PC端的样式通常需要采用响应式Web设计(RWD)技术。以下是实现这一目标的一些关键步骤： 1. **媒体查询**：利用CSS3的媒体查询功能，你可以设置不同的CSS规则针对不同的设备视口宽度。例如，...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值