利用css实现移动端，ipad，pc端

最新推荐文章于 2025-03-04 08:25:32 发布
最新推荐文章于 2025-03-04 08:25:32 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： css sass javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51651340/article/details/124734784
版权
本文介绍了如何利用CSS实现网页在移动端、iPad和PC端的自适应布局。关键在于根据屏幕宽度设置样式，并确保在不同设备上正确隐藏非目标端的样式，以避免样式冲突和显示问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<title>响应式布局</title>
    <link rel="stylesheet" href="apple-pc.css" media="only screen and (min-width:1000px)">
    <link rel="stylesheet" href="apple-pad.css" media="only screen and (min-width: 760px) and (max-width:1000px)">
    <link rel="stylesheet" href="apple-phone.css" media="only screen and (max-width: 760px)">

使网页适用于不同屏幕的大小主要取决于宽度

 在设定样式的时候，不要忘了在每个样式当中将其他端口的样式隐藏掉

pc端


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
前端PC-移动端CSS公共样式+HTML

				
			

			

				

					老街的酒香
				

				

					05-07
					
					4670
					
				

			

		

		

			
				
无聊把自己平时用的CSS公共样式整理发上来，方便自己查看也方便共享一：移动端公共样式/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* 解决IOS默认滑动很卡的情况 */
    -webkit-overflow-scrollin......

			
		

	



                

            
              



	

		

			

				
					
实现移动端（PC端）div拖拽自动排列功能

				
			

			

				

					conan的博客
				

				

					06-12
					
					926
					
				

			

		

		

			
				
1、进入画面后，按下F12，手机或iPad都可以拖拽。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1

			
		

	



              


  
              

                


	

		

			

				
					
css ipad 兼容

				
			

			

				

					weixin_35751412的博客
				

				

					12-23
					
					482
					
				

			

		

		

			
				
iPad 和其他移动设备在解析和渲染 CSS 时有一些特定的差异。为了让你的网站在 iPad 上正常显示，你需要考虑以下几点：

缩放：iPad 默认情况下会对网站进行缩放，所以你需要在网站的根元素上添加 viewport 标签来控制缩放。

触摸事件：iPad 使用触摸事件来操作网站，所以你需要使用触摸事件相关的 CSS 属性来调整样式。

媒体查询：你可以使用媒体查询来为 iPad 特定的视口...

			
		

	





	

		

			

				
					
第七章：项目实战 - 第四节 - Tailwind CSS 移动端适配实践

				
			

			

				

					qianmoQ - 关注云计算,关注大数据
				

				

					03-04
					
					662
					
				

			

		

		

			
				
本节将详细介绍如何使用 Tailwind CSS 进行移动端适配，包括响应式设计、触摸交互优化、性能优化等方面。

			
		

	



		

			
		



	

		

			

				
					
CSS @media - 手机和平板适配

				
			

			

				

					Stavin Li的博客
				

				

					02-09
					
					1884
					
				

			

		

		

			
				
tip:
1.css默认手机样式，平板在此基础上修改数值；
2.以500px作为两者区分

1.手机css
h3{
    height: 4.96rem;
    padding-top: 1.51rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }

2.平板css

2.1竖屏

@media screen and (orientation: portrait) and (min-device-widt.

			
		

	





	

		

			

				
					
iPad专用CSS

				
			

			

				

					CSS 初学者指南
				

				

					06-23
					
					614
					
				

			

		

		

			
				
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* Fo...

			
		

	





	

		

			

				
					
移动端&PC端CSS样式兼容代码

				
			

			

				

					awba4090的博客
				

				

					09-26
					
					959
					
				

			

		

		

			
				
CSS样式兼容代码
1.禁止选中复制文本
*{
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
2.单行文本溢出显示省略号…
p {
    overflow: hidden;
    text-overflow: ...

			
		

	





	

		

			

				
					
vue移动端和pc端切换显示两套不同的代码

				
			

			

				

					zZZz_luo的博客
				

				

					03-24
					
					1682
					
				

			

		

		

			
				
首先在App.vue中
<template >
  <div id="app" >
    <!--    <router-view />-->
    <router-view v-if="showPage == 1" name="m" ></router-view>
    <router-view v-if="showPage == 2" name="pc" ></router-view>
  </d

			
		

	





	

		

			

				
					
vue pc移动两个html,vue一套代码适应移动端，pc端

				
			

			

				

					weixin_28676973的博客
				

				

					06-10
					
					2128
					
				

			

		

		

			
				
一、使用场景：有适配pc端改为适配pc端和移动端，使用2套css代码实现App.vuecreated: function () {if(document.documentElement.clientWidth > 640){require('./style/index.：');this.plaform = 'pc';}else{require('./style/mobile.scss');t...

			
		

	





	

		

			

				
					
postcss适配移动端

				
			

			

				

					缚己
				

				

					04-09
					
					861
					
				

			

		

		

			
				
<h2 id="下载所需库">下载所需库</h2>
<pre><code class="language-text">"less-loader": "7.0.1&quot

			
		

	





	

		

			

				
					
pc端+移动端页面自适应的写法

				
			

			

				

					BubbleABC的博客
				

				

					09-28
					
					955
					
				

			

		

		

			
				
结尾有彩蛋
index.html页面内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    /

			
		

	





	

		

			

				
					
移动端手机和平板适配解决方案

				
			

			

				

					03-25
				

			

		

		

			
				
移动端手机和平板适配解决方案，已用于生产环境。

			
		

	





	

		

			

				
					
css兼容手机、平板、PC各种分辨率的网站

				
			

			

				

					05-06
				

			

		

		

			
				
css兼容手机、平板、PC各种分辨率的网站,css兼容pc+平板+手机范例

			
		

	





	

		

			

				
					
兼容pc端、手机端、ipad全屏显示

				
			

			

				

					07-27
				

			

		

		

			
				
资源可以大家一起分享，学习无止尽。关于电脑端、手机端、ipad端全部兼容。

			
		

	





	

		

			

				
					
【前端之路】通过css让移动端与pc端自适应

				
			

			

				

					29的博客
				

				

					04-11
					
					5191
					
				

			

		

		

			
				
跨平台移动WEB技术



一、目的

1、了解什么是响应式WEB设计

2、掌握CSS3媒体查询的使用

3、熟悉什么是栅格系统

4、掌握弹性盒布局

5、掌握汉堡菜单的制作

二、制作一个页面：

   1、PC端为国字型布局，移动端为上下布局

   2、必须有导航（不少于4个），移动端将导航收起，变为汉堡菜单。

   3、页面中的文字和图片能够自适应设备大小
...

			
		

	





	

		

			

				
					
HTML页面代码移动端和pc兼容,我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局...

				
			

			

				

					weixin_35300493的博客
				

				

					06-03
					
					526
					
				

			

		

		

			
				
首先在head里面需要引入移动端属性：1.css布局方式之div + css布局；      标题: div + css布局内容: 兼容pc端和移动端的css布局(function () {var html = document.documentElement;// 获取屏幕宽度var hwidth = html.getBoundingClientRect().width;// 设置html标签的...

			
		

	





	

		

			

				
					
Vue PC端和移动端适配样式（css样式）

				
			

			

				

					sunshineTing2的博客
				

				

					03-23
					
					4672
					
				

			

		

		

			
				
项目需求：XX项目时间赶，主做PC端，移动端是在原有基础上改动，
在这一基础上，建议直接采用@media 媒体查询对大小屏幕进行css调整，通过window.screen.width判断屏幕宽度


一、需要一个全局globalMixin.js，判断当前屏幕为移动端还是PC端
export const GlobalMixin = {
	data() {
	    return {
	        isApp: false // true：代表移动端，false：代表PC端
	    }
	},
	crea

			
		

	





	

		

			

				
					
iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes）

				
			

			

				

					大爱无疆的博客
				

				

					04-29
					
					7092
					
				

			

		

		

			
				
iPad CSS控制横屏/竖屏布局（Landscape/Portrait Modes）

使用不同的CSS控制布局
iPad\iPad2的分辨率是1024*768，同时iPad也支持横屏和竖屏。为了让内容更好的展现给用户，我们就需要在竖屏和横屏的布局上做不同的处理。
@media only screen and (max-device-width: 1024px) and (orienta

			
		

	





	

		

			

				
					
CSS3 - @media 判断iphone / ipad 机型

				
			

			

				

					小白
				

				

					05-21
					
					8124
					
				

			

		

		

			
				
兼容iphone4/4s：

 @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
} 

兼容iphone5 ：

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
} 

兼容iphone6，iphone7，iphone8...

			
		

	





	

		

			

				
					
vant 适配移动端和pc

					
最新发布

				
			

			

				

					04-03
				

			

		

		

			
				
好的，用户的问题是关于Vant框架如何同时适配移动端和PC端。首先，我需要回忆一下Vant本身的设计定位。Vant主要是针对移动端的组件库，所以默认情况下可能更适合移动端使用。但用户希望同时适配PC端，这意味着需要让...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值